From b2fd7b5d05773da507dcb4e68f1aee5718d26fb5 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 5 Apr 2024 12:01:52 +0200
Subject: [PATCH 1/3] Frontend fixes (#231)

* Temp

* Fixes editors.

* Reuse hooks.
---
 backend/src/Notifo.Domain/Liquid/LiquidApp.cs |   2 +-
 .../Liquid/LiquidNotificationBase.cs          |  13 +-
 .../Liquid/LiquidPropertiesProvider.cs        |   2 +
 .../Notifo.Domain/Liquid/LiquidProperty.cs    |   5 +-
 .../src/Notifo.Domain/Liquid/LiquidUser.cs    |   6 +-
 .../Utils/UtilsServiceExtensions.cs           |   4 +
 .../ChannelTemplatesController.cs             |  25 +-
 .../Dtos/TemplatePropertyDto.cs               |  34 ++
 .../EmailTemplatesController.cs               |   5 +-
 .../MessagingTemplatesController.cs           |   5 +-
 .../SmsTemplatesController.cs                 |   5 +-
 frontend/package-lock.json                    |  28 +-
 frontend/package.json                         |   4 +-
 frontend/src/app/framework/index.ts           |   2 +-
 frontend/src/app/framework/react/Code.tsx     |   2 +
 .../framework/react/CodeEditor.stories.tsx    |  28 ++
 .../src/app/framework/react/CodeEditor.tsx    | 136 ++++++
 .../src/app/framework/react/Icon.stories.tsx  |   2 +-
 frontend/src/app/framework/react/Icon.tsx     |   2 +-
 .../src/app/framework/react/ListSearch.tsx    |  18 +-
 frontend/src/app/framework/react/Marker.tsx   |  49 ---
 frontend/src/app/framework/react/hooks.ts     |  69 +++-
 frontend/src/app/pages/TopNav.tsx             |   6 +-
 .../pages/email-templates/EmailTemplate.tsx   |   7 +-
 .../email-templates/EmailTemplatePage.tsx     |  41 +-
 .../editor/EmailHtmlTextEditor.tsx            | 143 ++-----
 .../editor/EmailTextEditor.tsx                |  31 +-
 .../pages/email-templates/editor/helpers.ts   |  62 ++-
 .../MessagingTemplatePage.tsx                 |  91 ++--
 .../src/app/pages/publish/PublishDialog.tsx   |   2 +-
 .../pages/sms-templates/SmsTemplatePage.tsx   |  88 ++--
 .../src/app/pages/templates/TemplateForm.tsx  |   2 +-
 frontend/src/app/service/service.ts           | 173 +++++++-
 frontend/src/app/shared/components/Forms.tsx  |  45 +-
 .../shared/components/TemplateProperties.tsx  |  35 ++
 frontend/src/app/shared/components/index.ts   |   1 +
 frontend/src/app/style/_common.scss           |  32 +-
 frontend/src/app/style/_emails.scss           |  21 +-
 frontend/src/app/style/_messaging.scss        |   2 +-
 frontend/src/app/style/_mixins.scss           |  23 --
 frontend/src/app/style/_sms.scss              |   2 +-
 frontend/src/app/style/icons/Read Me.txt      |   2 +-
 frontend/src/app/style/icons/demo.html        |  16 +-
 .../src/app/style/icons/fonts/icomoon.eot     | Bin 8176 -> 8620 bytes
 .../src/app/style/icons/fonts/icomoon.svg     |   1 +
 .../src/app/style/icons/fonts/icomoon.ttf     | Bin 8012 -> 8456 bytes
 .../src/app/style/icons/fonts/icomoon.woff    | Bin 8088 -> 8532 bytes
 frontend/src/app/style/icons/selection.json   |   2 +-
 frontend/src/app/style/icons/style.css        |  13 +-
 frontend/src/app/texts/en.ts                  |   1 +
 frontend/src/app/texts/index.ts               |  11 +-
 frontend/src/app/texts/tr.ts                  |  45 +-
 frontend/src/sdk/ui/components/Loader.tsx     |   4 +-
 tools/sdk/Notifo.SDK/Generated.cs             | 388 +++++++++++++++++-
 54 files changed, 1323 insertions(+), 413 deletions(-)
 create mode 100644 backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/Dtos/TemplatePropertyDto.cs
 create mode 100644 frontend/src/app/framework/react/CodeEditor.stories.tsx
 create mode 100644 frontend/src/app/framework/react/CodeEditor.tsx
 delete mode 100644 frontend/src/app/framework/react/Marker.tsx
 create mode 100644 frontend/src/app/shared/components/TemplateProperties.tsx

diff --git a/backend/src/Notifo.Domain/Liquid/LiquidApp.cs b/backend/src/Notifo.Domain/Liquid/LiquidApp.cs
index cbaf726e..cfb8c92c 100644
--- a/backend/src/Notifo.Domain/Liquid/LiquidApp.cs
+++ b/backend/src/Notifo.Domain/Liquid/LiquidApp.cs
@@ -19,6 +19,6 @@ public sealed class LiquidApp(App app)
     public static void Describe(LiquidProperties properties)
     {
         properties.AddString("name",
-            "The name of the app.");
+            "The name of the app. Cannot be null or undefined.");
     }
 }
diff --git a/backend/src/Notifo.Domain/Liquid/LiquidNotificationBase.cs b/backend/src/Notifo.Domain/Liquid/LiquidNotificationBase.cs
index 7e3e2ef6..01ed1ce0 100644
--- a/backend/src/Notifo.Domain/Liquid/LiquidNotificationBase.cs
+++ b/backend/src/Notifo.Domain/Liquid/LiquidNotificationBase.cs
@@ -52,18 +52,21 @@ protected LiquidNotificationBase(
     protected static void DescribeBase(LiquidProperties properties)
     {
         properties.AddString("subject",
-            "The notification subject.");
+            "The notification subject. Cannot be null or undefined.");
 
         properties.AddString("body",
-            "The notification body. Can be null.");
+            "The notification body. Can be null or undefined.");
 
         properties.AddString("linkUrl",
-            "The link URL. Can be null.");
+            "The link URL. Can be null or undefined.");
+
+        properties.AddString("linkText",
+            "The link text that can be set when a linkUrl is set. Can be null or undefined.");
 
         properties.AddString("imageSmall",
-            "The URL to the small image. Optimized for the current use case (e.g. emails). Can be null.");
+            "The URL to the small image. Optimized for the current use case (e.g. emails). Can be null or undefined.");
 
         properties.AddString("imageLarge",
-            "The URL to the large image. Optimized for the current use case (e.g. emails). Can be null.");
+            "The URL to the large image. Optimized for the current use case (e.g. emails). Can be null or undefined.");
     }
 }
diff --git a/backend/src/Notifo.Domain/Liquid/LiquidPropertiesProvider.cs b/backend/src/Notifo.Domain/Liquid/LiquidPropertiesProvider.cs
index e8b3cd94..e699ed58 100644
--- a/backend/src/Notifo.Domain/Liquid/LiquidPropertiesProvider.cs
+++ b/backend/src/Notifo.Domain/Liquid/LiquidPropertiesProvider.cs
@@ -5,6 +5,8 @@
 //  All rights reserved. Licensed under the MIT license.
 // ==========================================================================
 
+#pragma warning disable CA1822 // Mark members as static
+
 namespace Notifo.Domain.Liquid;
 
 public sealed class LiquidPropertiesProvider
diff --git a/backend/src/Notifo.Domain/Liquid/LiquidProperty.cs b/backend/src/Notifo.Domain/Liquid/LiquidProperty.cs
index c9728579..e2711cf3 100644
--- a/backend/src/Notifo.Domain/Liquid/LiquidProperty.cs
+++ b/backend/src/Notifo.Domain/Liquid/LiquidProperty.cs
@@ -36,11 +36,10 @@ public void AddBoolean(string path, string? description = null)
 
     public void AddObject(string path, Action inner, string? description = null)
     {
-        pathStack.Push(path);
-
         Add(new LiquidProperty(FullPath(path), LiquidPropertyType.Object, description));
-        inner();
 
+        pathStack.Push(path);
+        inner();
         pathStack.Pop();
     }
 
diff --git a/backend/src/Notifo.Domain/Liquid/LiquidUser.cs b/backend/src/Notifo.Domain/Liquid/LiquidUser.cs
index c23eeeee..eb3a94a8 100644
--- a/backend/src/Notifo.Domain/Liquid/LiquidUser.cs
+++ b/backend/src/Notifo.Domain/Liquid/LiquidUser.cs
@@ -23,12 +23,12 @@ public sealed class LiquidUser(User user)
     public static void Describe(LiquidProperties properties)
     {
         properties.AddString("fullName",
-            "The full name of the user.");
+            "The full name of the user. Can be null or undefined.");
 
         properties.AddString("emailAddress",
-            "The email address of the user.");
+            "The email address of the user. Can be null or undefined.");
 
         properties.AddString("phoneNumber",
-            "The phone number of the user.");
+            "The phone number of the user. Can be null or undefined.");
     }
 }
diff --git a/backend/src/Notifo.Domain/Utils/UtilsServiceExtensions.cs b/backend/src/Notifo.Domain/Utils/UtilsServiceExtensions.cs
index ac1c5985..1d77e198 100644
--- a/backend/src/Notifo.Domain/Utils/UtilsServiceExtensions.cs
+++ b/backend/src/Notifo.Domain/Utils/UtilsServiceExtensions.cs
@@ -5,6 +5,7 @@
 //  All rights reserved. Licensed under the MIT license.
 // ==========================================================================
 
+using Notifo.Domain.Liquid;
 using Notifo.Domain.Utils;
 
 namespace Microsoft.Extensions.DependencyInjection;
@@ -15,5 +16,8 @@ public static void AddMyUtils(this IServiceCollection services)
     {
         services.AddSingletonAs<ImageFormatter>()
             .As<IImageFormatter>();
+
+        services.AddSingletonAs<LiquidPropertiesProvider>()
+            .AsSelf();
     }
 }
diff --git a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/ChannelTemplatesController.cs b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/ChannelTemplatesController.cs
index 31577099..96951e18 100644
--- a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/ChannelTemplatesController.cs
+++ b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/ChannelTemplatesController.cs
@@ -9,6 +9,7 @@
 using Notifo.Areas.Api.Controllers.ChannelTemplates.Dtos;
 using Notifo.Domain.ChannelTemplates;
 using Notifo.Domain.Identity;
+using Notifo.Domain.Liquid;
 using Notifo.Infrastructure;
 using Notifo.Infrastructure.Reflection;
 using Notifo.Pipeline;
@@ -20,10 +21,12 @@ namespace Notifo.Areas.Api.Controllers.ChannelTemplates;
 public abstract class ChannelTemplatesController<T, TDto> : BaseController where T : class, new() where TDto : class, new()
 {
     private readonly IChannelTemplateStore<T> channelTemplateStore;
+    private readonly LiquidPropertiesProvider propertiesProvider;
 
-    protected ChannelTemplatesController(IChannelTemplateStore<T> channelTemplateStore)
+    protected ChannelTemplatesController(IChannelTemplateStore<T> channelTemplateStore, LiquidPropertiesProvider propertiesProvider)
     {
         this.channelTemplateStore = channelTemplateStore;
+        this.propertiesProvider = propertiesProvider;
     }
 
     /// <summary>
@@ -47,6 +50,26 @@ public async Task<ListResponseDto<ChannelTemplateDto>> GetTemplates(string appId
         return response;
     }
 
+    /// <summary>
+    /// Get the template properties.
+    /// </summary>
+    /// <param name="appId">The id of the app where the templates belong to.</param>
+    /// <response code="200">Channel templates properties returned.</response>.
+    /// <response code="404">App not found.</response>
+    [HttpGet("properties")]
+    [AppPermission(NotifoRoles.AppAdmin)]
+    public ListResponseDto<TemplatePropertyDto> GetProperties(string appId)
+    {
+        var properties = propertiesProvider.GetProperties();
+
+        var response = new ListResponseDto<TemplatePropertyDto>();
+
+        response.Items.AddRange(properties.OrderBy(x => x.Path).Select(TemplatePropertyDto.FromDomainObject));
+        response.Total = 0;
+
+        return response;
+    }
+
     /// <summary>
     /// Get the channel template by id.
     /// </summary>
diff --git a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/Dtos/TemplatePropertyDto.cs b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/Dtos/TemplatePropertyDto.cs
new file mode 100644
index 00000000..9296033a
--- /dev/null
+++ b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/Dtos/TemplatePropertyDto.cs
@@ -0,0 +1,34 @@
+// ==========================================================================
+//  Notifo.io
+// ==========================================================================
+//  Copyright (c) Sebastian Stehle
+//  All rights reserved. Licensed under the MIT license.
+// ==========================================================================
+
+using Notifo.Domain.Liquid;
+using Notifo.Infrastructure.Reflection;
+
+namespace Notifo.Areas.Api.Controllers.ChannelTemplates.Dtos;
+
+public sealed class TemplatePropertyDto
+{
+    /// <summary>
+    /// The property path.
+    /// </summary>
+    public string Path { get; set; }
+
+    /// <summary>
+    /// The data ty.
+    /// </summary>
+    public LiquidPropertyType Type { get; set; }
+
+    /// <summary>
+    /// The optional description.
+    /// </summary>
+    public string? Description { get; set; }
+
+    public static TemplatePropertyDto FromDomainObject(LiquidProperty source)
+    {
+        return SimpleMapper.Map(source, new TemplatePropertyDto());
+    }
+}
diff --git a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/EmailTemplatesController.cs b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/EmailTemplatesController.cs
index 44d088dc..38a95034 100644
--- a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/EmailTemplatesController.cs
+++ b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/EmailTemplatesController.cs
@@ -9,6 +9,7 @@
 using Notifo.Areas.Api.Controllers.ChannelTemplates.Dtos;
 using Notifo.Domain.Channels.Email;
 using Notifo.Domain.ChannelTemplates;
+using Notifo.Domain.Liquid;
 
 namespace Notifo.Areas.Api.Controllers.ChannelTemplates;
 
@@ -16,8 +17,8 @@ namespace Notifo.Areas.Api.Controllers.ChannelTemplates;
 [ApiExplorerSettings(GroupName = "EmailTemplates")]
 public sealed class EmailTemplatesController : ChannelTemplatesController<EmailTemplate, EmailTemplateDto>
 {
-    public EmailTemplatesController(IChannelTemplateStore<EmailTemplate> channelTemplateStore)
-        : base(channelTemplateStore)
+    public EmailTemplatesController(IChannelTemplateStore<EmailTemplate> channelTemplateStore, LiquidPropertiesProvider propertiesProvider)
+        : base(channelTemplateStore, propertiesProvider)
     {
     }
 }
diff --git a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/MessagingTemplatesController.cs b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/MessagingTemplatesController.cs
index 4f716d34..974ff53a 100644
--- a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/MessagingTemplatesController.cs
+++ b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/MessagingTemplatesController.cs
@@ -9,6 +9,7 @@
 using Notifo.Areas.Api.Controllers.ChannelTemplates.Dtos;
 using Notifo.Domain.Channels.Messaging;
 using Notifo.Domain.ChannelTemplates;
+using Notifo.Domain.Liquid;
 
 namespace Notifo.Areas.Api.Controllers.ChannelTemplates;
 
@@ -16,8 +17,8 @@ namespace Notifo.Areas.Api.Controllers.ChannelTemplates;
 [ApiExplorerSettings(GroupName = "MessagingTemplates")]
 public sealed class MessagingTemplatesController : ChannelTemplatesController<MessagingTemplate, MessagingTemplateDto>
 {
-    public MessagingTemplatesController(IChannelTemplateStore<MessagingTemplate> channelTemplateStore)
-        : base(channelTemplateStore)
+    public MessagingTemplatesController(IChannelTemplateStore<MessagingTemplate> channelTemplateStore, LiquidPropertiesProvider propertiesProvider)
+        : base(channelTemplateStore, propertiesProvider)
     {
     }
 }
diff --git a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/SmsTemplatesController.cs b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/SmsTemplatesController.cs
index a74b1c1b..216b07c1 100644
--- a/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/SmsTemplatesController.cs
+++ b/backend/src/Notifo/Areas/Api/Controllers/ChannelTemplates/SmsTemplatesController.cs
@@ -9,6 +9,7 @@
 using Notifo.Areas.Api.Controllers.ChannelTemplates.Dtos;
 using Notifo.Domain.Channels.Sms;
 using Notifo.Domain.ChannelTemplates;
+using Notifo.Domain.Liquid;
 
 namespace Notifo.Areas.Api.Controllers.ChannelTemplates;
 
@@ -16,8 +17,8 @@ namespace Notifo.Areas.Api.Controllers.ChannelTemplates;
 [ApiExplorerSettings(GroupName = "SmsTemplates")]
 public sealed class SmsTemplatesController : ChannelTemplatesController<SmsTemplate, SmsTemplateDto>
 {
-    public SmsTemplatesController(IChannelTemplateStore<SmsTemplate> channelTemplateStore)
-        : base(channelTemplateStore)
+    public SmsTemplatesController(IChannelTemplateStore<SmsTemplate> channelTemplateStore, LiquidPropertiesProvider propertiesProvider)
+        : base(channelTemplateStore, propertiesProvider)
     {
     }
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2d255bfa..dac33636 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -37,8 +37,8 @@
         "react-popper": "2.3.0",
         "react-push-preview": "^0.1.9",
         "react-redux": "8.1.3",
-        "react-router": "6.19.0",
-        "react-router-dom": "6.19.0",
+        "react-router": "6.22.3",
+        "react-router-dom": "6.22.3",
         "react-router-redux": "4.0.8",
         "react-split": "2.0.14",
         "react-toastify": "^9.1.3",
@@ -5681,9 +5681,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.12.0.tgz",
-      "integrity": "sha512-2hXv036Bux90e1GXTWSMfNzfDDK8LA8JYEWfyHxzvwdp6GyoWEovKc9cotb3KCKmkdwsIBuFGX7ScTWyiHv7Eg==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -20403,11 +20403,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.19.0.tgz",
-      "integrity": "sha512-0W63PKCZ7+OuQd7Tm+RbkI8kCLmn4GPjDbX61tWljPxWgqTKlEpeQUwPkT1DRjYhF8KSihK0hQpmhU4uxVMcdw==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
       "dependencies": {
-        "@remix-run/router": "1.12.0"
+        "@remix-run/router": "1.15.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -20417,12 +20417,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.19.0.tgz",
-      "integrity": "sha512-N6dWlcgL2w0U5HZUUqU2wlmOrSb3ighJmtQ438SWbhB1yuLTXQ8yyTBMK3BSvVjp7gBtKurT554nCtMOgxCZmQ==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
       "dependencies": {
-        "@remix-run/router": "1.12.0",
-        "react-router": "6.19.0"
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
       },
       "engines": {
         "node": ">=14.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index f1564bd7..afdbd153 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,8 +32,8 @@
     "react-popper": "2.3.0",
     "react-push-preview": "^0.1.9",
     "react-redux": "8.1.3",
-    "react-router": "6.19.0",
-    "react-router-dom": "6.19.0",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
     "react-router-redux": "4.0.8",
     "react-split": "2.0.14",
     "react-toastify": "^9.1.3",
diff --git a/frontend/src/app/framework/index.ts b/frontend/src/app/framework/index.ts
index c600591f..7e0dad65 100644
--- a/frontend/src/app/framework/index.ts
+++ b/frontend/src/app/framework/index.ts
@@ -11,6 +11,7 @@ export * from './model';
 export * from './react/ApiValue';
 export * from './react/ClickOutside';
 export * from './react/Code';
+export * from './react/CodeEditor';
 export * from './react/Confirm';
 export * from './react/DropZone';
 export * from './react/ErrorBoundary';
@@ -20,7 +21,6 @@ export * from './react/FormControlError';
 export * from './react/FormError';
 export * from './react/Gist';
 export * from './react/hooks';
-export * from './react/Marker';
 export * from './react/Icon';
 export * from './react/IFrame';
 export * from './react/LanguageSelector';
diff --git a/frontend/src/app/framework/react/Code.tsx b/frontend/src/app/framework/react/Code.tsx
index f4e7f821..be3fee9d 100644
--- a/frontend/src/app/framework/react/Code.tsx
+++ b/frontend/src/app/framework/react/Code.tsx
@@ -40,6 +40,7 @@ export const Code = (props: CodeProps) => {
         const editor = CodeMirror.fromTextArea(textarea, {
             foldGutter: true,
             gutters: [
+                'CodeMirror-lint-markers',
                 'CodeMirror-linenumbers',
                 'CodeMirror-foldgutter',
             ],
@@ -48,6 +49,7 @@ export const Code = (props: CodeProps) => {
             lineNumbers: true,
             lineSeparator: undefined,
             lineWrapping: false,
+            theme: 'material',
             readOnly: true,
             tabindex: 0,
             tabSize: 2,
diff --git a/frontend/src/app/framework/react/CodeEditor.stories.tsx b/frontend/src/app/framework/react/CodeEditor.stories.tsx
new file mode 100644
index 00000000..16458732
--- /dev/null
+++ b/frontend/src/app/framework/react/CodeEditor.stories.tsx
@@ -0,0 +1,28 @@
+/*
+ * Notifo.io
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { CodeEditor } from './CodeEditor';
+
+const meta: Meta<typeof CodeEditor> = {
+    component: CodeEditor,
+    render: args => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [value, setValue] = React.useState('Code');
+    
+        return (
+            <CodeEditor {...args} value={value} onChange={setValue} />
+        );
+
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditor>;
+
+export const Default: Story = {};
\ No newline at end of file
diff --git a/frontend/src/app/framework/react/CodeEditor.tsx b/frontend/src/app/framework/react/CodeEditor.tsx
new file mode 100644
index 00000000..5ab90e64
--- /dev/null
+++ b/frontend/src/app/framework/react/CodeEditor.tsx
@@ -0,0 +1,136 @@
+/*
+ * Notifo.io
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved.
+ */
+
+import classNames from 'classnames';
+import * as CodeMirror from 'codemirror';
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/indent-fold';
+import * as React from 'react';
+import { Types } from './../utils';
+import { useEventCallback } from './hooks';
+
+export interface CodeEditorProps {
+    // The actual value.
+    value?: any;
+
+    // The class name.
+    className?: string;
+
+    // The additional options.
+    initialOptions?: CodeMirror.EditorConfiguration;
+
+    // The additional options.
+    options?: CodeMirror.EditorConfiguration;
+
+    // Invoked when the value has been changed.
+    onChange?: (value: string) => void;
+
+    // Invoked when blurred.
+    onBlur?: () => void;
+}
+
+export const CodeEditor = (props: CodeEditorProps) => {
+    const {
+        className,
+        initialOptions,
+        onBlur,
+        onChange,
+        options,
+        value,
+    } = props;
+
+    const [editor, setEditor] = React.useState<CodeMirror.Editor>();
+    const onBlurRef = React.useRef(onBlur);
+    const onChangeRef = React.useRef(onChange);
+    const valueRef = React.useRef('');
+    const ignoreNext = React.useRef(false);
+
+    onBlurRef.current = onBlur;
+    onChangeRef.current = onChange;
+
+    const doInit = useEventCallback((textarea: HTMLTextAreaElement) => {
+        if (!textarea) {
+            return;
+        }
+
+        const editor = CodeMirror.fromTextArea(textarea, {
+            foldGutter: true,
+            gutters: [
+                'CodeMirror-lint-markers',
+                'CodeMirror-linenumbers',
+                'CodeMirror-foldgutter',
+            ],
+            indentUnit: 2,
+            indentWithTabs: false,
+            lineNumbers: true,
+            lineSeparator: undefined,
+            lineWrapping: false,
+            theme: 'material',
+            tabSize: 2,
+            ...initialOptions || {},
+        });
+
+        editor.on('change', editor => {
+            const newValue = editor.getValue();
+
+            if (valueRef.current !== newValue) {
+                valueRef.current = newValue;
+
+                ignoreNext.current = true;
+                try {
+                    onChangeRef.current?.(newValue);
+                } finally {
+                    ignoreNext.current = false;
+                }
+            }
+        });
+
+        editor.on('blur', () => {
+            onBlurRef.current?.();
+        });
+
+        setEditor(editor);
+    });
+
+    React.useLayoutEffect(() => {
+        if (!editor) {
+            return;
+        }
+
+        let actualText: string;
+
+        if (Types.isString(value)) {
+            actualText = value;
+        } else {
+            actualText = JSON.stringify(value || {}, undefined, 2);
+        }
+
+
+        if (valueRef.current !== value) {
+            valueRef.current = value;
+            editor.setValue(actualText);
+        }
+    }, [editor, value]);
+
+    React.useLayoutEffect(() => {
+        if (!editor || !options) {
+            return;
+        }
+
+        for (const [key, value] of Object.entries(options)) {
+            editor.setOption(key as any, value);
+        }
+    }, [editor, options]);
+
+    return (
+        <div className={classNames('code-editor', className)} style={{ fontSize: '14px' }}>
+            <textarea ref={doInit} />
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/frontend/src/app/framework/react/Icon.stories.tsx b/frontend/src/app/framework/react/Icon.stories.tsx
index 30fb9b2f..2aa851a8 100644
--- a/frontend/src/app/framework/react/Icon.stories.tsx
+++ b/frontend/src/app/framework/react/Icon.stories.tsx
@@ -46,9 +46,9 @@ const ALLICONS: IconType[] = [
     'expand_more',
     'extension',
     'file_copy',
+    'help-circle',
     'history',
     'hourglass_empty',
-    'integration',
     'keyboard_arrow_down',
     'keyboard_arrow_left',
     'keyboard_arrow_right',
diff --git a/frontend/src/app/framework/react/Icon.tsx b/frontend/src/app/framework/react/Icon.tsx
index f1e41ca2..965fc29a 100644
--- a/frontend/src/app/framework/react/Icon.tsx
+++ b/frontend/src/app/framework/react/Icon.tsx
@@ -25,11 +25,11 @@ export type IconType =
     'file_copy' |
     'fullscreen' |
     'fullscreen_exit' |
+    'help-circle' |
     'history' |
     'hourglass_empty' |
     'info_outline' |
     'insert_emoticon' |
-    'integration' |
     'keyboard_arrow_down' |
     'keyboard_arrow_left' |
     'keyboard_arrow_right' |
diff --git a/frontend/src/app/framework/react/ListSearch.tsx b/frontend/src/app/framework/react/ListSearch.tsx
index ea6f5f54..8500030d 100644
--- a/frontend/src/app/framework/react/ListSearch.tsx
+++ b/frontend/src/app/framework/react/ListSearch.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 import { InputProps } from 'reactstrap';
 import { ListState, Query } from './../model';
 import { ClearInput } from './ClearInput';
-import { useEventCallback } from './hooks';
+import { useDebounce, useEventCallback } from './hooks';
 
 export interface ListSearchProps extends Pick<InputProps, Exclude<keyof InputProps, 'list'>> {
     // The bootstrap size.
@@ -37,17 +37,13 @@ export const ListSearch = (props: ListSearchProps) => {
 
     const [search, setSearch] = React.useState<string>();
 
+    const debouncedSearch = useDebounce(search, 3000);
+
     React.useEffect(() => {
-        const timer = setTimeout(() => {
-            if (hasChanged(list.search, search) && onSearch) {
-                onSearch({ search });
-            }
-        }, 3000);
-
-        return () => {
-            clearInterval(timer);
-        };
-    }, [list, search, onSearch]);
+        if (hasChanged(list.search, debouncedSearch) && onSearch) {
+            onSearch({ search: debouncedSearch });
+        }
+    }, [debouncedSearch, list, onSearch]);
 
     React.useEffect(() => {
         setSearch(list.search);
diff --git a/frontend/src/app/framework/react/Marker.tsx b/frontend/src/app/framework/react/Marker.tsx
deleted file mode 100644
index e1ae5469..00000000
--- a/frontend/src/app/framework/react/Marker.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Notifo.io
- *
- * @license
- * Copyright (c) Sebastian Stehle. All rights reserved.
- */
-
-import markerSDK, { MarkerSdk } from '@marker.io/browser';
-import * as React from 'react';
-import { NavLink } from 'reactstrap';
-import { texts } from '@app/texts';
-import { useEventCallback } from './hooks';
-
-export interface MarkerProps {
-    projectId?: string;
-}
-
-export const Marker = (props: MarkerProps) => {
-    const { projectId } = props;
-    const widgetRef = React.useRef<MarkerSdk>();
-
-    React.useEffect(() => {
-        if (projectId) {
-            const setup = async (project: string) => {
-                const widget = await markerSDK.loadWidget({ project });
-
-                widget.hide();
-                widgetRef.current = widget;
-            };
-
-            setup(projectId);
-        }
-
-        return () => {
-            widgetRef.current?.unload();
-            widgetRef.current = undefined;
-        };
-    }, [projectId]);
-
-    const doCapture = useEventCallback(() => {
-        widgetRef.current?.capture('fullscreen');
-    });
-
-    return (
-        <NavLink className='cursor-pointer' onClick={doCapture}>
-            {texts.common.feedback}
-        </NavLink>
-    );
-};
\ No newline at end of file
diff --git a/frontend/src/app/framework/react/hooks.ts b/frontend/src/app/framework/react/hooks.ts
index 2fc8ef64..6e6bb348 100644
--- a/frontend/src/app/framework/react/hooks.ts
+++ b/frontend/src/app/framework/react/hooks.ts
@@ -6,6 +6,7 @@
  */
 
 /* eslint-disable no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 import * as React from 'react';
 
@@ -134,7 +135,7 @@ export function useSavedState<T>(initial: T, key: string): [T, (newValue: T) =>
     return [value, valueSetter];
 }
 
-export function usePrevious <T>(value: T) {
+export function usePrevious<T>(value: T) {
     const ref = React.useRef<T>();
 
     React.useEffect(() => {
@@ -142,4 +143,70 @@ export function usePrevious <T>(value: T) {
     });
 
     return ref.current;
+}
+
+type QueryState<T> = {
+    value: T;
+    error?: any;
+    isLoading?: boolean;
+    isLoaded?: boolean;
+};
+
+type QueryParams<T> = {
+    queryKey: string[];
+    queryFn: (abort: AbortController) => Promise<T>;
+    defaultValue: T;
+};
+
+export function useSimpleQuery<T>(params: QueryParams<T>): QueryState<T> {
+    const [state, setState] = React.useState<QueryState<T>>({ value: params.defaultValue });
+    const request = React.useRef(0);
+
+    React.useEffect(() => {
+        async function loadData(id: number, abort: AbortController) {
+            request.current = id;
+
+            setState(s => ({ ...s, isLoading: true }));
+            try {
+                const value = await params.queryFn(abort);
+    
+                if (request.current === id) {
+                    setState(s => ({ ...s, error: undefined, value }));
+                }
+            } catch (err) {
+                if (request.current === id) {
+                    setState(s => ({ ...s, error: err }));
+                }
+            } finally {
+                if (request.current === id) {
+                    setState(s => ({ ...s, isLoading: false, isLoaded: true }));
+                }
+            }
+        }
+
+        const abort = new AbortController();
+        loadData(new Date().getTime(), abort);
+
+        return () => {
+            abort.abort();
+        };
+    }, params.queryKey);
+
+    return state;
+}
+
+export function useDebounce<T>(value: T, debounce: number): T {
+    const [state, setState] = React.useState(value);
+
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            setState(value);
+        }, debounce);
+
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [debounce, value]);
+
+    return state;
 }
\ No newline at end of file
diff --git a/frontend/src/app/pages/TopNav.tsx b/frontend/src/app/pages/TopNav.tsx
index f54b45d9..2bc1cf9d 100644
--- a/frontend/src/app/pages/TopNav.tsx
+++ b/frontend/src/app/pages/TopNav.tsx
@@ -8,7 +8,7 @@
 import { useDispatch } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, Navbar, NavItem } from 'reactstrap';
-import { Marker, useBoolean, useEventCallback } from '@app/framework';
+import { useBoolean, useEventCallback } from '@app/framework';
 import { AppsDropdown, Integrated, Logo } from '@app/shared/components';
 import { logoutStart, useLogin } from '@app/state';
 import { texts } from '@app/texts';
@@ -34,10 +34,6 @@ export const TopNav = () => {
             </Nav>
 
             <Nav navbar className='ml-auto'>
-                <NavItem>
-                    <Marker projectId={(window as any)['options'].markerProject} />
-                </NavItem>
-
                 {userProfile?.token &&
                     <NavItem>
                         <Integrated token={userProfile.token} />
diff --git a/frontend/src/app/pages/email-templates/EmailTemplate.tsx b/frontend/src/app/pages/email-templates/EmailTemplate.tsx
index 86cd70d7..db74af66 100644
--- a/frontend/src/app/pages/email-templates/EmailTemplate.tsx
+++ b/frontend/src/app/pages/email-templates/EmailTemplate.tsx
@@ -146,8 +146,11 @@ export const EmailTemplate = (props: EmailTemplateProps) => {
                             <Forms.Text name='subject' label={texts.common.subject} vertical />
                         </div>
 
-                        <BodyHtml appId={appId} visible={showHtml.value} schema={schema} />
-                        <BodyText appId={appId} visible={!showHtml.value} />
+                        {showHtml.value ? (
+                            <BodyHtml appId={appId} visible={true} schema={schema} />
+                        ) : (
+                            <BodyText appId={appId} visible={true} />
+                        )}
                     </div>
                 </Form>
 
diff --git a/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx b/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx
index 7a11f6e1..8f88db35 100644
--- a/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx
+++ b/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx
@@ -10,9 +10,11 @@ import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router';
 import { NavLink } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Col, Label, Row } from 'reactstrap';
-import { Icon, Loader, Toggle, useEventCallback } from '@app/framework';
+import { Button, Col, Label, Row } from 'reactstrap';
+import { Icon, Loader, Toggle, useBooleanObj, useEventCallback, useSimpleQuery } from '@app/framework';
 import { LanguageSelector } from '@app/framework/react/LanguageSelector';
+import { Clients, TemplatePropertyDto } from '@app/service';
+import { TemplateProperties } from '@app/shared/components';
 import { loadEmailTemplate, updateEmailTemplate, useApp, useEmailTemplates } from '@app/state';
 import { texts } from '@app/texts';
 import { EmailTemplate } from './EmailTemplate';
@@ -26,6 +28,7 @@ export const EmailTemplatePage = () => {
     const appName = app.name;
     const loadingTemplate = useEmailTemplates(x => x.loadingTemplate);
     const loadingTemplateError = useEmailTemplates(x => x.loadingTemplateError);
+    const sidebar = useBooleanObj();
     const template = useEmailTemplates(x => x.template);
     const templateId = useParams().templateId!;
     const updating = useEmailTemplates(x => x.updating);
@@ -33,6 +36,16 @@ export const EmailTemplatePage = () => {
     const upserting = useEmailTemplates(x => x.creatingLanguage || x.deletingLanguage || x.updatingLanguage);
     const [language, setLanguage] = React.useState(appLanguages[0]);
 
+    const properties = useSimpleQuery<TemplatePropertyDto[]>({
+        queryKey: [],
+        queryFn: async () => {
+            const result = await Clients.SmsTemplates.getProperties(appId);
+            
+            return result.items;
+        },
+        defaultValue: [],
+    });
+
     React.useEffect(() => {
         dispatch(loadEmailTemplate({ appId, id: templateId }));
     }, [dispatch, appId, templateId]);
@@ -62,7 +75,7 @@ export const EmailTemplatePage = () => {
     return (
         <>
             <div className='email-header'>
-                <Row className='align-items-center'>
+                <Row className='align-items-center gap-2' noGutters>
                     <Col xs='auto'>
                         <Row noGutters className='align-items-center'>
                             <Col xs='auto'>
@@ -100,6 +113,12 @@ export const EmailTemplatePage = () => {
                             </Col>
                         </>
                     }
+
+                    <Col xs='auto'>
+                        <Button className='btn-flat' color='blank' onClick={sidebar.toggle}>
+                            <Icon className='text-icon' type='help-circle' />
+                        </Button>
+                    </Col>
                 </Row>
             </div>
 
@@ -111,6 +130,22 @@ export const EmailTemplatePage = () => {
                     template={template.languages[language]}
                     templateId={template.id} />
             }
+
+            {sidebar.value &&
+                <div className='email-properties slide-right'>
+                    <Row>
+                        <Col>
+                            <h3>{texts.common.properties}</h3>
+                        </Col>
+                        <Col xs='auto'>
+                            <Button className='btn-flat' color='blank' size='sm' onClick={sidebar.toggle}>
+                                <Icon className='text-icon' type='clear' />
+                            </Button>
+                        </Col>
+                    </Row>
+                    <TemplateProperties properties={properties.value} />
+                </div>
+            }
         </>
     );
 };
diff --git a/frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx b/frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx
index 273e93af..503fb169 100644
--- a/frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx
+++ b/frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx
@@ -9,13 +9,12 @@
 
 import * as CodeMirror from 'codemirror';
 import * as React from 'react';
-import { useEventCallback } from '@app/framework';
+import { CodeEditor, CodeEditorProps } from '@app/framework';
 import { EmailPreviewErrorDto, MjmlSchema } from '@app/service';
+import { completeAfter, completeIfAfterLt, completeIfInTag } from './helpers';
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/matchtags';
-import 'codemirror/addon/fold/foldcode';
-import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/xml-hint';
 import 'codemirror/addon/lint/lint';
@@ -27,48 +26,20 @@ import 'codemirror/addon/search/search';
 import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/mode/xml/xml';
-import { completeAfter, completeIfAfterLt, completeIfInTag } from './helpers';
-
-export interface EmailHtmlTextEditorProps {
-    // The value.
-    value: string;
 
+export interface EmailHtmlTextEditorProps extends CodeEditorProps {
     // The template errors.
     errors?: EmailPreviewErrorDto[];
 
     // The email schema.
     schema?: MjmlSchema;
-
-    // When the html has changed.
-    onChange?: (value: string) => void;
-
-    // Called when the focus has been lost.
-    onBlur?: () => void;
 }
 
 export const EmailHtmlTextEditor = (props: EmailHtmlTextEditorProps) => {
-    const {
-        errors,
-        onBlur,
-        onChange,
-        schema,
-        value,
-    } = props;
-
-    const [editor, setEditor] = React.useState<CodeMirror.Editor>();
-    const onBlurRef = React.useRef(onBlur);
-    const onChangeRef = React.useRef(onChange);
-    const valueRef = React.useRef('');
-
-    onBlurRef.current = onBlur;
-    onChangeRef.current = onChange;
+    const { errors, schema, ...other } = props;
 
-    const doInit = useEventCallback((textarea: HTMLTextAreaElement) => {
-        if (!textarea) {
-            return;
-        }
-
-        const editor = CodeMirror.fromTextArea(textarea, {
+    const initialOptions = React.useMemo(() => {
+        const result: CodeEditorProps['options'] = {
             autoCloseTags: true,
             mode: 'xml',
             extraKeys: {
@@ -87,86 +58,34 @@ export const EmailHtmlTextEditor = (props: EmailHtmlTextEditorProps) => {
                 '\'=\'': completeIfInTag,
                 'Ctrl-Space': 'autocomplete',
             },
-            gutters: [
-                'CodeMirror-lint-markers',
-                'CodeMirror-linenumbers',
-                'CodeMirror-foldgutter',
-            ],
-            indentWithTabs: false,
-            indentUnit: 2,
-            lineNumbers: true,
-            lineSeparator: undefined,
             matchTags: true,
-            theme: 'material',
-            tabSize: 2,
-        });
-
-        editor.on('change', () => {
-            const currentOnChange = onChangeRef.current;
-
-            if (!currentOnChange) {
-                return;
-            }
-
-            const value = editor.getValue();
-
-            if (value === valueRef.current) {
-                return;
-            }
-
-            valueRef.current = value;
-
-            currentOnChange(value);
-        });
-
-        editor.on('blur', () => {
-            const currentOnBlur = onBlurRef.current;
-
-            if (!currentOnBlur) {
-                return;
-            }
-
-            currentOnBlur();
-        });
-
-        setEditor(editor);
-    });
-
-    React.useEffect(() => {
-        editor?.setOption('hintOptions', schema ?  { schemaInfo: schema } : undefined);
-    }, [editor, schema]);
-
-    React.useEffect(() => {
-        if (!editor || valueRef.current === value) {
-            return;
-        }
-
-        editor.setValue(value);
-    }, [editor, value]);
-
-    React.useEffect(() => {
-        if (!editor) {
-            return;
-        }
-
-        editor.setOption('lint', {
-            getAnnotations: () => {
-                if (!errors) {
-                    return [];
-                }
-
-                return errors.map(({ message, lineNumber }) => {
-                    const from = CodeMirror.Pos(lineNumber! - 1, 1);
-
-                    return { message, severity: 'error', from, to: from };
-                });
+        };
+
+        return result;
+    }, []);
+
+    const options = React.useMemo(() => {
+        const result: CodeEditorProps['options'] = {
+            hintOptions: schema ? { schemaInfo: schema } : undefined,
+            lint: {
+                getAnnotations: () => {
+                    if (!errors) {
+                        return [];
+                    }
+    
+                    return errors.map(({ message, lineNumber }) => {
+                        const from = CodeMirror.Pos(lineNumber! - 1, 1);
+    
+                        return { message, severity: 'error', from, to: from };
+                    });
+                },
             },
-        });
-    }, [editor, errors]);
+        };
+
+        return result;
+    }, [errors, schema]);
 
     return (
-        <div className='email-editor'>
-            <textarea ref={doInit} />
-        </div>
+        <CodeEditor initialOptions={initialOptions} options={options} className='email-editor' {...other} />
     );
 };
\ No newline at end of file
diff --git a/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx b/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx
index cab91103..fd80935b 100644
--- a/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx
+++ b/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx
@@ -5,48 +5,39 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
  */
 
-import * as React from 'react';
 import Split from 'react-split';
-import { Alert, Input } from 'reactstrap';
-import { useEventCallback } from '@app/framework';
+import { Alert } from 'reactstrap';
+import { CodeEditor, CodeEditorProps } from '@app/framework';
 import { usePreview } from './helpers';
+import 'codemirror/mode/django/django';
 
-export interface EmailTextEditorProps {
-    // The value.
-    value?: string | null;
-
+export interface EmailTextEditorProps extends CodeEditorProps {
     // The app name.
     appId: string;
-
-    // When the text has changed.
-    onChange: (value: string) => void;
-
-    // Called when the focus has been lost.
-    onBlur: () => void;
 }
 
+const OPTIONS = {
+    mode: 'django',
+};
+
 export const EmailTextEditor = (props: EmailTextEditorProps) => {
     const {
         appId,
-        onBlur,
-        onChange,
         value,
+        ...other
     } = props;
 
     const emailMarkup = value || '';
     const emailPreview = usePreview(appId, emailMarkup, 'Text');
 
-    const doChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-        onChange(event.target.value);
-    });
-
     const error = emailPreview.rendering.errors?.find(x => !x.lineNumber || x.lineNumber < 0);
 
     return (
         <div className='email-editor white'>
             <Split direction='horizontal'>
                 <div className='left'>
-                    <Input type='textarea' value={value || ''} onChange={doChange} onBlur={onBlur} spellCheck={false} />
+                    <CodeEditor value={value} {...other}
+                        initialOptions={OPTIONS} />
                 </div>
 
                 <div className='right'>
diff --git a/frontend/src/app/pages/email-templates/editor/helpers.ts b/frontend/src/app/pages/email-templates/editor/helpers.ts
index 29667963..8cd5fb7b 100644
--- a/frontend/src/app/pages/email-templates/editor/helpers.ts
+++ b/frontend/src/app/pages/email-templates/editor/helpers.ts
@@ -8,57 +8,41 @@
 /* eslint-disable quote-props */
 
 import * as CodeMirror from 'codemirror';
-import * as React from 'react';
+import { useDebounce, useSimpleQuery } from '@app/framework';
 import { Clients, EmailPreviewDto, EmailPreviewType } from '@app/service';
 
-type MarkupRequest = { requestId?: any };
 type MarkupResponse = { rendering: EmailPreviewDto; template?: string };
 
-export function usePreview(appId: string, template: string, type: EmailPreviewType): MarkupResponse {
-    const [emailPreview, setEmailPreview] = React.useState<MarkupResponse>({ rendering: {} });
+const DEFAULT_RESPONSE: MarkupResponse = { rendering: {} };
 
-    const status = React.useRef<MarkupRequest>({});
+export function usePreview(appId: string, sourceTemplate: string, type: EmailPreviewType): MarkupResponse {
+    const template = useDebounce(sourceTemplate, 500);
 
-    React.useEffect(() => {
-        async function render() {
-            const requestId = new Date().getTime();
-
-            status.current.requestId = requestId;
+    const query = useSimpleQuery<MarkupResponse>({
+        queryKey: [template, type],
+        queryFn: async () => {
+            if (!template) {
+                return { rendering: {} };
+            }
 
             try {
                 const rendering = await Clients.EmailTemplates.postPreview(appId, { template, type });
 
-                if (status.current.requestId === requestId) {
-                    setEmailPreview({ rendering, template });
-                }
+                return { rendering, template };
             } catch (ex: any) {
-                if (status.current.requestId === requestId) {
-                    const rendering: EmailPreviewDto = {
-                        errors: [{
-                            message: ex.message,
-                        } as any],
-                    };
-
-                    setEmailPreview({ rendering, template });
-                }
+                const rendering: EmailPreviewDto = {
+                    errors: [{
+                        message: ex.message,
+                    } as any],
+                };
+                
+                return { rendering, template };
             }
-        }
-
-        if (!status.current.requestId) {
-            render();
-            return undefined;
-        }
-
-        const timeout = setTimeout(async () => {
-            await render();
-        }, 2000);
-
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [appId, template, type]);
-
-    return emailPreview;
+        },
+        defaultValue: DEFAULT_RESPONSE,
+    });
+    
+    return query.value;
 }
 
 export function completeAfter(editor: CodeMirror.Editor, predicate?: (cursor: CodeMirror.Position) => boolean) {
diff --git a/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx b/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx
index a1975f2a..74ac247d 100644
--- a/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx
+++ b/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx
@@ -12,13 +12,19 @@ import { useParams } from 'react-router';
 import { NavLink } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Button, Card, CardBody, Col, Form, Row } from 'reactstrap';
-import { FormError, Icon, Loader, Types, useEventCallback } from '@app/framework';
-import { Forms } from '@app/shared/components';
+import { FormError, Icon, Loader, Types, useEventCallback, useSimpleQuery } from '@app/framework';
+import { Clients, TemplatePropertyDto } from '@app/service';
+import { Forms, TemplateProperties } from '@app/shared/components';
 import { loadMessagingTemplate, updateMessagingTemplate, useApp, useMessagingTemplates } from '@app/state';
 import { texts } from '@app/texts';
+import 'codemirror/mode/django/django';
 
 type FormValues = { name?: string; primary: boolean; languages: { [key: string]: string } };
 
+const OPTIONS = {
+    mode: 'django',
+};
+
 export const MessagingTemplatePage = () => {
     const dispatch = useDispatch<any>();
     const app = useApp()!;
@@ -32,6 +38,16 @@ export const MessagingTemplatePage = () => {
     const updatingError = useMessagingTemplates(x => x.updatingError);
     const [language, setLanguage] = React.useState(appLanguages[0]);
 
+    const properties = useSimpleQuery<TemplatePropertyDto[]>({
+        queryKey: [],
+        queryFn: async () => {
+            const result = await Clients.MessagingTemplates.getProperties(appId);
+            
+            return result.items;
+        },
+        defaultValue: [],
+    });
+
     React.useEffect(() => {
         dispatch(loadMessagingTemplate({ appId, id: templateId }));
     }, [dispatch, appId, templateId]);
@@ -61,7 +77,6 @@ export const MessagingTemplatePage = () => {
     });
 
     const form = useForm<FormValues>({ mode: 'onChange' });
-    const { reset } = form;
 
     React.useEffect(() => {
         const result: any = { ...Types.clone(template), languages: {} };
@@ -73,7 +88,7 @@ export const MessagingTemplatePage = () => {
         }
 
         form.reset(result);
-    }, [template]);
+    }, [form, template]);
 
     return (
         <div className='messaging-form'>
@@ -97,35 +112,49 @@ export const MessagingTemplatePage = () => {
                 </Row>
             </div>
 
-            <FormProvider {...form}>
-                <Form onSubmit={form.handleSubmit(doSave)}>
-                    <Card>
-                        <CardBody>
-                            <fieldset disabled={updating}>
-                                <Forms.Text name='name'
-                                    label={texts.common.name} />
-
-                                <Forms.Boolean name='primary'
-                                    label={texts.common.primary} />
-
-                                <Forms.LocalizedTextArea name='languages'
-                                    languages={app.languages}
-                                    language={language}
-                                    onLanguageSelect={setLanguage}
-                                    label={texts.common.templates} />
-                            </fieldset>
-
-                            <FormError error={updatingError} />
-
-                            <div className='text-right mt-2'>
-                                <Button type='submit' color='success' disabled={updating}>
-                                    <Loader light small visible={updating} /> {texts.common.save}
-                                </Button>
-                            </div>
+            <Row>
+                <Col xs={7}>
+                    <FormProvider {...form}>
+                        <Form onSubmit={form.handleSubmit(doSave)}>
+                            <Card>
+                                <CardBody>
+                                    <fieldset disabled={updating}>
+                                        <Forms.Text name='name' vertical
+                                            label={texts.common.name} />
+
+                                        <Forms.LocalizedCode name='languages' vertical
+                                            languages={app.languages}
+                                            language={language}
+                                            onLanguageSelect={setLanguage}
+                                            label={texts.common.templates}
+                                            initialOptions={OPTIONS} />
+
+                                        <FormError error={updatingError} />
+
+                                        <div className='d-flex justify-content-between mt-2 align-items-center'>
+                                            <Forms.Boolean name='primary' vertical className='mb-0'
+                                                label={texts.common.primary} />
+
+                                            <div className='text-right'>
+                                                <Button type='submit' color='success' disabled={updating}>
+                                                    <Loader light small visible={updating} /> {texts.common.save}
+                                                </Button>
+                                            </div>
+                                        </div>
+                                    </fieldset>
+                                </CardBody>
+                            </Card>
+                        </Form>
+                    </FormProvider>
+                </Col>
+                <Col xs={5}>
+                    <Card style={{ height: 'calc(100vh - 200px)' }}>
+                        <CardBody className='overflow-auto'>
+                            <TemplateProperties properties={properties.value} />
                         </CardBody>
                     </Card>
-                </Form>
-            </FormProvider>
+                </Col>
+            </Row>
         </div>
     );
 };
diff --git a/frontend/src/app/pages/publish/PublishDialog.tsx b/frontend/src/app/pages/publish/PublishDialog.tsx
index b504238a..510ff4d6 100644
--- a/frontend/src/app/pages/publish/PublishDialog.tsx
+++ b/frontend/src/app/pages/publish/PublishDialog.tsx
@@ -127,7 +127,7 @@ const PublishDialogInner = () => {
 
     React.useEffect(() => {        
         form.reset(Types.clone(dialogValues || {}) as any);
-    }, [dialogValues]);
+    }, [dialogValues, form]);
 
     return (
         <Modal isOpen={true} size='lg' backdrop={false} toggle={doCloseForm} className={classNames('publish-modal', { ['fullscreen-mode']: viewFullscreen })}>
diff --git a/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx b/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx
index 3e3d34d0..ffd340a5 100644
--- a/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx
+++ b/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx
@@ -12,13 +12,19 @@ import { useParams } from 'react-router';
 import { NavLink } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Button, Card, CardBody, Col, Form, Row } from 'reactstrap';
-import { FormError, Icon, Loader, Types, useEventCallback } from '@app/framework';
-import { Forms } from '@app/shared/components';
+import { FormError, Icon, Loader, Types, useEventCallback, useSimpleQuery } from '@app/framework';
+import { Clients, TemplatePropertyDto } from '@app/service';
+import { Forms, TemplateProperties } from '@app/shared/components';
 import { loadSmsTemplate, updateSmsTemplate, useApp, useSmsTemplates } from '@app/state';
 import { texts } from '@app/texts';
+import 'codemirror/mode/django/django';
 
 type FormValues = { name?: string; primary: boolean; languages: { [key: string]: string } };
 
+const OPTIONS = {
+    mode: 'django',
+};
+
 export const SmsTemplatePage = () => {
     const dispatch = useDispatch<any>();
     const app = useApp()!;
@@ -32,6 +38,16 @@ export const SmsTemplatePage = () => {
     const updatingError = useSmsTemplates(x => x.updatingError);
     const [language, setLanguage] = React.useState(appLanguages[0]);
 
+    const properties = useSimpleQuery<TemplatePropertyDto[]>({
+        queryKey: [],
+        queryFn: async () => {
+            const result = await Clients.SmsTemplates.getProperties(appId);
+            
+            return result.items;
+        },
+        defaultValue: [],
+    });
+
     React.useEffect(() => {
         dispatch(loadSmsTemplate({ appId, id: templateId }));
     }, [dispatch, appId, templateId]);
@@ -96,35 +112,49 @@ export const SmsTemplatePage = () => {
                 </Row>
             </div>
 
-            <FormProvider {...form}>
-                <Form onSubmit={form.handleSubmit(doSave)}>
-                    <Card>
-                        <CardBody>
-                            <fieldset disabled={updating}>
-                                <Forms.Text name='name'
-                                    label={texts.common.name} />
-
-                                <Forms.Boolean name='primary'
-                                    label={texts.common.primary} />
-
-                                <Forms.LocalizedTextArea name='languages'
-                                    languages={app.languages}
-                                    language={language}
-                                    onLanguageSelect={setLanguage}
-                                    label={texts.common.templates} />
-                            </fieldset>
-
-                            <FormError error={updatingError} />
-
-                            <div className='text-right mt-2'>
-                                <Button type='submit' color='success' disabled={updating}>
-                                    <Loader light small visible={updating} /> {texts.common.save}
-                                </Button>
-                            </div>
+            <Row>
+                <Col xs={7}>
+                    <FormProvider {...form}>
+                        <Form onSubmit={form.handleSubmit(doSave)}>
+                            <Card>
+                                <CardBody>
+                                    <fieldset disabled={updating}>
+                                        <Forms.Text name='name' vertical
+                                            label={texts.common.name} />
+
+                                        <Forms.LocalizedCode name='languages' vertical
+                                            languages={app.languages}
+                                            language={language}
+                                            onLanguageSelect={setLanguage}
+                                            label={texts.common.templates} 
+                                            initialOptions={OPTIONS} />
+
+                                        <FormError error={updatingError} />
+
+                                        <div className='d-flex justify-content-between mt-2 align-items-center'>
+                                            <Forms.Boolean name='primary' vertical className='mb-0'
+                                                label={texts.common.primary} />
+
+                                            <div className='text-right'>
+                                                <Button type='submit' color='success' disabled={updating}>
+                                                    <Loader light small visible={updating} /> {texts.common.save}
+                                                </Button>
+                                            </div>
+                                        </div>
+                                    </fieldset>
+                                </CardBody>
+                            </Card>
+                        </Form>
+                    </FormProvider>
+                </Col>
+                <Col xs={5}>
+                    <Card style={{ height: 'calc(100vh - 200px)' }}>
+                        <CardBody className='overflow-auto'>
+                            <TemplateProperties properties={properties.value} />
                         </CardBody>
                     </Card>
-                </Form>
-            </FormProvider>
+                </Col>
+            </Row>
         </div>
     );
 };
diff --git a/frontend/src/app/pages/templates/TemplateForm.tsx b/frontend/src/app/pages/templates/TemplateForm.tsx
index 95ff1331..5aabbba5 100644
--- a/frontend/src/app/pages/templates/TemplateForm.tsx
+++ b/frontend/src/app/pages/templates/TemplateForm.tsx
@@ -72,7 +72,7 @@ export const TemplateForm = (props: TemplateFormProps) => {
 
     React.useEffect(() => {
         form.reset(Types.clone(template || {}));
-    }, [template]);
+    }, [form, template]);
 
     return (
         <FormProvider {...form}>
diff --git a/frontend/src/app/service/service.ts b/frontend/src/app/service/service.ts
index 65809b27..7473e4d8 100644
--- a/frontend/src/app/service/service.ts
+++ b/frontend/src/app/service/service.ts
@@ -4023,6 +4023,57 @@ export class EmailTemplatesClient {
         return Promise.resolve<ChannelTemplateDetailsDtoOfEmailTemplateDto>(null as any);
     }
 
+    /**
+     * Get the template properties.
+     * @param appId The id of the app where the templates belong to.
+     * @return Channel templates returned.
+     */
+    getProperties(appId: string): Promise<ListResponseDtoOfTemplatePropertyDto> {
+        let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/properties";
+        if (appId === undefined || appId === null)
+            throw new Error("The parameter 'appId' must be defined.");
+        url_ = url_.replace("{appId}", encodeURIComponent("" + appId));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetProperties(_response);
+        });
+    }
+
+    protected processGetProperties(response: Response): Promise<ListResponseDtoOfTemplatePropertyDto> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ListResponseDtoOfTemplatePropertyDto;
+            return result200;
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Channel template or app not found.", status, _responseText, _headers);
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            let result500: any = null;
+            result500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ErrorDto;
+            return throwException("Operation failed.", status, _responseText, _headers, result500);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ListResponseDtoOfTemplatePropertyDto>(null as any);
+    }
+
     /**
      * Get the channel template by id.
      * @param appId The id of the app where the templates belong to.
@@ -4537,6 +4588,57 @@ export class MessagingTemplatesClient {
         return Promise.resolve<ChannelTemplateDetailsDtoOfMessagingTemplateDto>(null as any);
     }
 
+    /**
+     * Get the template properties.
+     * @param appId The id of the app where the templates belong to.
+     * @return Channel templates returned.
+     */
+    getProperties(appId: string): Promise<ListResponseDtoOfTemplatePropertyDto> {
+        let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/properties";
+        if (appId === undefined || appId === null)
+            throw new Error("The parameter 'appId' must be defined.");
+        url_ = url_.replace("{appId}", encodeURIComponent("" + appId));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetProperties(_response);
+        });
+    }
+
+    protected processGetProperties(response: Response): Promise<ListResponseDtoOfTemplatePropertyDto> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ListResponseDtoOfTemplatePropertyDto;
+            return result200;
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Channel template or app not found.", status, _responseText, _headers);
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            let result500: any = null;
+            result500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ErrorDto;
+            return throwException("Operation failed.", status, _responseText, _headers, result500);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ListResponseDtoOfTemplatePropertyDto>(null as any);
+    }
+
     /**
      * Get the channel template by id.
      * @param appId The id of the app where the templates belong to.
@@ -5051,6 +5153,57 @@ export class SmsTemplatesClient {
         return Promise.resolve<ChannelTemplateDetailsDtoOfSmsTemplateDto>(null as any);
     }
 
+    /**
+     * Get the template properties.
+     * @param appId The id of the app where the templates belong to.
+     * @return Channel templates returned.
+     */
+    getProperties(appId: string): Promise<ListResponseDtoOfTemplatePropertyDto> {
+        let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/properties";
+        if (appId === undefined || appId === null)
+            throw new Error("The parameter 'appId' must be defined.");
+        url_ = url_.replace("{appId}", encodeURIComponent("" + appId));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetProperties(_response);
+        });
+    }
+
+    protected processGetProperties(response: Response): Promise<ListResponseDtoOfTemplatePropertyDto> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ListResponseDtoOfTemplatePropertyDto;
+            return result200;
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Channel template or app not found.", status, _responseText, _headers);
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            let result500: any = null;
+            result500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ErrorDto;
+            return throwException("Operation failed.", status, _responseText, _headers, result500);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ListResponseDtoOfTemplatePropertyDto>(null as any);
+    }
+
     /**
      * Get the channel template by id.
      * @param appId The id of the app where the templates belong to.
@@ -6411,7 +6564,7 @@ export interface UpdateSystemUserDto {
     /** The password of the user. */
     password?: string | undefined;
     /** Additional role for the user. */
-    roles: string[];
+    roles?: string[] | undefined;
 }
 
 export interface InfoDto {
@@ -6776,6 +6929,24 @@ export interface ChannelTemplateDto {
     lastUpdate: string;
 }
 
+export interface ListResponseDtoOfTemplatePropertyDto {
+    /** The items. */
+    items: TemplatePropertyDto[];
+    /** The total number of items. */
+    total: number;
+}
+
+export interface TemplatePropertyDto {
+    /** The property path. */
+    path: string;
+    /** The data ty. */
+    type: LiquidPropertyType;
+    /** The optional description. */
+    description?: string | undefined;
+}
+
+export type LiquidPropertyType = "Array" | "String" | "Number" | "Boolean" | "Object";
+
 export interface ChannelTemplateDetailsDtoOfEmailTemplateDto {
     /** The id of the template. */
     id: string;
diff --git a/frontend/src/app/shared/components/Forms.tsx b/frontend/src/app/shared/components/Forms.tsx
index b843831a..7f1be305 100644
--- a/frontend/src/app/shared/components/Forms.tsx
+++ b/frontend/src/app/shared/components/Forms.tsx
@@ -10,7 +10,7 @@ import * as React from 'react';
 import { ControllerFieldState, FormState, get, useController, useFormState } from 'react-hook-form';
 import { Badge, Button, Col, CustomInput, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText, Label } from 'reactstrap';
 import { InputType } from 'reactstrap/es/Input';
-import { FormControlError, Icon, LanguageSelector, PasswordInput, Toggle, useEventCallback } from '@app/framework';
+import { CodeEditor, CodeEditorProps, FormControlError, Icon, LanguageSelector, PasswordInput, Toggle, useEventCallback } from '@app/framework';
 import { Types } from '@app/framework/utils';
 import { Picker, PickerOptions } from './Picker';
 
@@ -58,6 +58,11 @@ export interface BooleanFormProps extends FormEditorProps {
     asString?: boolean;
 }
 
+export interface CodeFormProps extends FormEditorProps {
+    // The initial options.
+    initialOptions?: CodeEditorProps['initialOptions'];
+}
+
 export interface OptionsFormProps<T> extends FormEditorProps {
     // The allowed selected values.
     options: FormEditorOption<T>[];
@@ -140,6 +145,14 @@ export module Forms {
         );
     };
 
+    export const LocalizedCode = ({ className, ...other }: LocalizedFormProps & CodeFormProps) => {
+        return (
+            <Forms.Row className={classNames(className, 'localized-value')} {...other} hideError>
+                <InputLocalizedCode {...other} />
+            </Forms.Row>
+        );
+    };
+
     export const Boolean = ({ label, ...other }: BooleanFormProps) => {
         return (
             <Forms.Row {...other}>
@@ -346,6 +359,16 @@ const InputToggle = ({ name, ...other }: BooleanFormProps) => {
     );
 };
 
+const InputCode = ({ name, ...other }: CodeFormProps) => {
+    const { field } = useController({ name });
+
+    return (
+        <>
+            <CodeEditor {...other} value={field.value} onBlur={field.onBlur} onChange={field.onChange} />
+        </>
+    );
+};
+
 const InputSelect = ({ name, options }: FormEditorProps & { options: ReadonlyArray<FormEditorOption<string | number | undefined>> }) => {
     const { field, fieldState, formState } = useController({ name });
 
@@ -506,6 +529,26 @@ const InputLocalizedTextArea = (props: LocalizedFormProps) => {
     );
 };
 
+const InputLocalizedCode = (props: LocalizedFormProps & CodeFormProps) => {
+    const { className, label, language, languages, name, onLanguageSelect, ...other } = props;
+    const fieldName = `${name}.${language}`;
+
+    return (
+        <div className='localized-input'>
+            <Forms.Error name={`${name}.root`} />
+
+            <div className='localized-languages'>
+                <LanguageSelector
+                    languages={languages}
+                    language={language}
+                    onSelect={onLanguageSelect} />
+            </div>
+
+            <InputCode {...other} name={fieldName} />
+        </div>
+    );
+};
+
 export function isInvalid(fieldState: ControllerFieldState, formState: FormState<any>) {
     return !!fieldState.error && (fieldState.isTouched || formState.submitCount > 0);
 }
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/TemplateProperties.tsx b/frontend/src/app/shared/components/TemplateProperties.tsx
new file mode 100644
index 00000000..22fc1039
--- /dev/null
+++ b/frontend/src/app/shared/components/TemplateProperties.tsx
@@ -0,0 +1,35 @@
+/*
+ * Notifo.io
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved.
+ */
+
+import { Badge } from 'reactstrap';
+import { TemplatePropertyDto } from '@app/service';
+
+export interface TemplatePropertiesProps {
+    properties: TemplatePropertyDto[];
+}
+
+export const TemplateProperties = (props: TemplatePropertiesProps) => {
+    const { properties } = props;
+
+    return (
+        <div className='d-flex flex-column gap-6'>
+            {properties.map(p => 
+                <div key={p.path}>
+                    <div style={{ width: '60px', display: 'inline-block' }}>
+                        <Badge className='mr-2'>{p.type}</Badge>
+                    </div>
+
+                    <code>{p.path}</code>
+
+                    <div className='text-muted'>
+                        <small>{p.description}</small>
+                    </div>
+                </div>,
+            )}
+        </div>
+    );
+};
diff --git a/frontend/src/app/shared/components/index.ts b/frontend/src/app/shared/components/index.ts
index 297c4724..475f8d47 100644
--- a/frontend/src/app/shared/components/index.ts
+++ b/frontend/src/app/shared/components/index.ts
@@ -22,4 +22,5 @@ export * from './StatisticsCard';
 export * from './StatisticsLabel';
 export * from './TableFooter';
 export * from './TemplateInput';
+export * from './TemplateProperties';
 export * from './TemplateVariantsInput';
diff --git a/frontend/src/app/style/_common.scss b/frontend/src/app/style/_common.scss
index fe942f1f..2ff6eba6 100644
--- a/frontend/src/app/style/_common.scss
+++ b/frontend/src/app/style/_common.scss
@@ -8,10 +8,6 @@ body {
     background: $color-background;
 }
 
-* {
-    @include scrollbars(8px, $color-border-dark, transparent);
-}
-
 main {
     @include fixed($size-header, 0, 0, 0);
     overflow-y: auto;
@@ -37,6 +33,26 @@ main {
     width: 4rem;
 }
 
+.gap-2 {
+    gap: .25rem;
+}
+
+.gap-4 {
+    gap: .5rem;
+}
+
+.gap-6 {
+    gap: .75rem;
+}
+
+.gap-8 {
+    gap: 1rem;
+}
+
+code {
+    color: $color-primary;
+}
+
 label {
     font-size: $font-size-sm;
     font-weight: 500;
@@ -923,6 +939,8 @@ div {
 
         &.active {
             .nav-link {
+                color: $color-primary;
+                
                 &::before {
                     @include build-active;
                 }
@@ -1134,8 +1152,12 @@ em-emoji-picker {
     font-size: $font-size-sm;
 }
 
+.text-icon {
+    font-size: 1.25rem;
+}
+
 .text-lg {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
 }
 
 .truncate {
diff --git a/frontend/src/app/style/_emails.scss b/frontend/src/app/style/_emails.scss
index f1bd5251..c7ef5b71 100644
--- a/frontend/src/app/style/_emails.scss
+++ b/frontend/src/app/style/_emails.scss
@@ -3,7 +3,7 @@
 
 /* stylelint-disable selector-class-pattern */
 
-$color: #263238;
+$color-code: #263238;
 $color-border2: darken($color-border, 5%);
 $color-active: #ff5370;
 $color-background: #efefef;
@@ -19,7 +19,7 @@ $size-email-header: 5rem;
     }
 
     &-hints {
-        background: darken($color, 2%);
+        background: darken($color-code, 2%);
         border: 0;
     }
 
@@ -37,7 +37,7 @@ $size-email-header: 5rem;
     }
 
     &-lint-tooltip {
-        background: darken($color, 2%);
+        background: darken($color-code, 2%);
         border: 0;
         color: $color-white;
         font-size: 1rem;
@@ -104,6 +104,19 @@ $size-email-header: 5rem;
     }
 }
 
+.email-properties {
+    @include fixed($size-header, 0, 0, null);
+    @include box-shadow-outer(-2px, 0, 4px, .05);
+    background-color: $color-white;
+    border: 0;
+    border-radius: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 1.5rem;
+    width: 400px;
+    z-index: 1000;
+}
+
 .email {
     &-container {
         @include fixed($size-header + $size-email-header, 0, 0, $size-sidebar);
@@ -190,7 +203,7 @@ $size-email-header: 5rem;
 
 .gutter {
     &.gutter-horizontal {
-        background: $color;
+        background: $color-border2;
         background-image: none;
         border: 0;
         cursor: ew-resize;
diff --git a/frontend/src/app/style/_messaging.scss b/frontend/src/app/style/_messaging.scss
index 5fe2eb7d..d5ca4ef9 100644
--- a/frontend/src/app/style/_messaging.scss
+++ b/frontend/src/app/style/_messaging.scss
@@ -2,7 +2,7 @@
 @import 'mixins';
 
 .messaging-form {
-    max-width: 600px;
+    max-width: 1100px;
 }
 
 .messaging-templates {
diff --git a/frontend/src/app/style/_mixins.scss b/frontend/src/app/style/_mixins.scss
index 83997f79..9e48f0ee 100644
--- a/frontend/src/app/style/_mixins.scss
+++ b/frontend/src/app/style/_mixins.scss
@@ -42,29 +42,6 @@
     }
 }
 
-@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
-    &::-webkit-scrollbar {
-        height: $size;
-        width:  $size;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: $foreground-color;
-    }
-
-    &::-webkit-scrollbar-corner,
-    &::-webkit-scrollbar-track {
-        background: $background-color;
-    }
-
-    & {
-        scrollbar-color: $foreground-color $background-color;
-        scrollbar-face-color: $foreground-color;
-        scrollbar-track-color: $background-color;
-        scrollbar-width: thin;
-    }
-}
-
 @mixin hidden {
     opacity: 0;
     overflow-x: hidden;
diff --git a/frontend/src/app/style/_sms.scss b/frontend/src/app/style/_sms.scss
index 9f35740f..8a1680ff 100644
--- a/frontend/src/app/style/_sms.scss
+++ b/frontend/src/app/style/_sms.scss
@@ -2,7 +2,7 @@
 @import 'mixins';
 
 .sms-form {
-    max-width: 600px;
+    max-width: 1100px;
 }
 
 .sms-templates {
diff --git a/frontend/src/app/style/icons/Read Me.txt b/frontend/src/app/style/icons/Read Me.txt
index 8491652f..723a49ee 100644
--- a/frontend/src/app/style/icons/Read Me.txt	
+++ b/frontend/src/app/style/icons/Read Me.txt	
@@ -1,6 +1,6 @@
 Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
 
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
 
 You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
 
diff --git a/frontend/src/app/style/icons/demo.html b/frontend/src/app/style/icons/demo.html
index 196fcd6a..ce1607c9 100644
--- a/frontend/src/app/style/icons/demo.html
+++ b/frontend/src/app/style/icons/demo.html
@@ -9,10 +9,24 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;56)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;57)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-help-circle"></span>
+                <span class="mls"> icon-help-circle</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e938" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe938;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-insert_emoticon"></span>
diff --git a/frontend/src/app/style/icons/fonts/icomoon.eot b/frontend/src/app/style/icons/fonts/icomoon.eot
index 4026449c63110b132185aa57c6d4a099a58a313b..75943f8667eef6862c41de699c35712df5ac748f 100644
GIT binary patch
delta 1716
zcmcgtUuauZ82?Ug?!C#)-`l21Zn`8lNs~ZnW0R%H9BDWItW3wYRN8_M;?k{Bi%F|i
ztsurH6<35dAXs$l!53X$T$#d<8A=_aGB$=C_$GT%hR7cDMJ4t7&S{e;K@{xap7Z;@
z@AsYGcfNCT`{2m>W6F9Az!qCk3fA$t#PrJ1*Yr~W@D)C1&Q>c6fvG!RuiQ9L|6$Yo
z7Jw}Q^!_<JQ#qG@H+};kyokKQEIQOpsfG4B+I_Rt#ibu>h#-6$r(a)~KU?`?_1bZO
z$QIgfR4YphFa~P?(W7XawMup7!zb;3pnV24-d>o0c@ZRxfcX<mAW7`!#yNI`9cp~S
zPT>524L!Qs1dy6w0VqDqh>X)e@>z)|eI_*<)0T?5kGCx!bKH;qnl$Lz^MePXkZ3eR
z@y51vj5DT?;kS-+e3#hPYCH3u^#p4+GV)FCAq|Vt(U?=d;r_SKUr--uXT7Noay*Cr
z%j)YKlS<Au)5aI}Fy(4?k^2$ir|jQz4r%4Ir#U9hs`h*vTO48^;?x|AHr@biUgN&w
zBqz}^Mx9}f`w>q&v+d+Hr%0wv6_+>+KekJ>fHuAE5=E~e9&?L!kpHUtP)F={w>hw{
z3^IV7scAKB!FwxhZIvvOyL<(4J)}0~>9niMJK3(N=6$7I^?mOp*4+3&uQ2W+(N@>-
zj_9dwlN%O_yt;3!qH$r*kf;&YyJI~6qSV~@rF(~O#tInN?s=xIoAC=0UCosLbM7bX
z4t&Znb>&(>)YgyqaPSH4C;VRU7{^q`-Js~!cZjD9aYo9GhgRC0t0BQ5{^8zEr&oJ#
z)kTMP@Z~Q;8Qy^gzWe!fhNV+DXi3CXH&YcHwDkA_5f<>{pygn$ILe9z9JHi;#7V>{
zZ#YlBgE`{$Br!V5C<6^nLSEKQX1zGXlSeT_=m{NEC=|PM1@tE3sOpz?>{=pZm}V+D
zk;!DUnao5oWtv7Pq1pdFGFi$GpD&ls59doA)EZC%9(P>#_-#sEkt~u;4it5-qD1wR
z37f8{s?+HijKm%fM=}n@qkBzdqRTM4@L`vRP&kz`qamZuu4(o@BNR1LDJ*G-N=hZE
zBoU!vlN8C8m-D2bUoM|UG%|wd^h;htRVC#)+2_>!PFa&>ha3pXrWXr|#qB*VSJ)dI
z@EIx1DZAadm~JYvM{m7v=v0bsh;I~qr=}Bg<Ij3Zzkvhq694Yy=leVB?w3}2CzlUA
uR38y>PNGj8{W|`~r~co>82%IZHwE+KYT$#$mGFx;SBqK(BO95>Ci@EnvyT4&

delta 1273
zcmah}T}YEr7=F)p=8oI^OG|BL(|!;(vouhP^<$;vPeI}aT||AhiCOy;($X$+f<$=d
z4g^U>7v40zsDuJ5iO>ikg2+KvLO~Y_;YHmPWzYGxeRbF1-Fcq#KJVW-XPZ8{cF4Zw
zA!_rC+iPvr8KcYNhp%pEBckW9bLS&^Us3S=-1wU<!<9|XTtsY;$bGCktcS`wYQ7Ma
zC|zwgHpDCb3;Y}Sj_yeR;Af*0iMJGkuU+aruRn=BY#}Pm1iu#12m7dzCcsC*%M3jd
zzTM*Z2|kG$H~M-n_Y;SQJeA5%oU>IKVux6roMf%|USoTXC_g?LQQbbKkol#+fA(w?
zB*x=BAUic(L@5C5lZ)D2k)RRo)t02ecV(wEluI7kE?>I0$wl5M;!p=UlZCcZ!V8=L
zHf#|@`nVTaKG|B?n5@cpD}rWTCN;YboUGSlUqC${k3v~18mxNP#V+hO@E+_x7DFPw
zzJw|xvL-Vurc)K~0jFb~js_7z&O4Z)-SN@NU*kM2ZXz~{*qHNzIa?GRYOb)QF<kwb
zI4Q;n!7Hv4aQHBWPae!FMMD9M!DMGvwN-2)3&E+R_G}$vC-p|QIs%`0c(1dEL>KGg
z6WU(cloLVDDIV9R<ZMnoiZK+^4#*!lWtAYCK?0OP<Y1ygRA{(2|NOjP3#^+f*(f>Y
zh-}LJdtCW>0jnb;Z@?TUfiYL|rr6GzTN`v{P53+ixGHMaktYkvGMPbBnri2YBIr$v
zf!tFh-P`Mea-ox--{%c8UkjF)sHbLD%MH1>>5PcsSwyuLvZ}Bg4}h6h6D)jW;hdre
zsZ(Kcu4urz*8RoJ79J~Zv>Hql4?)lP2b_9v^8)Zip3qk1Hut!tnRO3Ycz?+$3&%>{
z`P4&)EsthYpUw4uCzs89^~>(79SS7Z^`|!CWAfP6-NXK*-xR6e29B75uqZ5%!f~wL
z6i@sA)hMmfOv4lo!Ib}IiUYHBoXV**%8#7GX5y~oh7y@VB}khRVqXQAegkU?laAY~
thc5<G4JboWv+)F06|1;1g-tU@b<#%KO6?>EJQ4N3qmIo#v*LNh{s6@74F&)J

diff --git a/frontend/src/app/style/icons/fonts/icomoon.svg b/frontend/src/app/style/icons/fonts/icomoon.svg
index f29e6001..76372457 100644
--- a/frontend/src/app/style/icons/fonts/icomoon.svg
+++ b/frontend/src/app/style/icons/fonts/icomoon.svg
@@ -63,4 +63,5 @@
 <glyph unicode="&#xe935;" glyph-name="add_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM554 640.667v-172h172v-84h-172v-172h-84v172h-172v84h172v172h84z" />
 <glyph unicode="&#xe936;" glyph-name="add_circle" d="M726 384.667v84h-172v172h-84v-172h-172v-84h172v-172h84v172h172zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
 <glyph unicode="&#xe937;" glyph-name="insert_emoticon" d="M512 192.667q-74 0-133 41t-85 107h436q-26-66-85-107t-133-41zM362 468.667q-26 0-45 19t-19 45 19 45 45 19 45-19 19-45-19-45-45-19zM662 468.667q-26 0-45 19t-19 45 19 45 45 19 45-19 19-45-19-45-45-19zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
+<glyph unicode="&#xe938;" glyph-name="help-circle" d="M981.333 426.667c0 129.579-52.565 246.997-137.472 331.861s-202.283 137.472-331.861 137.472-246.997-52.565-331.861-137.472-137.472-202.283-137.472-331.861 52.565-246.997 137.472-331.861 202.283-137.472 331.861-137.472 246.997 52.565 331.861 137.472 137.472 202.283 137.472 331.861zM896 426.667c0-106.069-42.923-201.984-112.469-271.531s-165.461-112.469-271.531-112.469-201.984 42.923-271.531 112.469-112.469 165.461-112.469 271.531 42.923 201.984 112.469 271.531 165.461 112.469 271.531 112.469 201.984-42.923 271.531-112.469 112.469-165.461 112.469-271.531zM428.075 540.502c7.808 22.229 23.851 39.168 43.605 48.64s42.965 11.392 65.195 3.541c19.541-6.869 34.944-20.053 44.8-36.651 7.808-13.099 12.117-28.373 12.203-44.245 0-6.613-1.664-13.184-4.992-19.797-3.413-6.827-8.661-13.867-15.701-20.907-30.251-30.251-78.123-46.592-78.123-46.592-22.357-7.467-34.432-31.616-26.965-53.973s31.616-34.432 53.973-26.965c0 0 65.877 21.589 111.488 67.2 11.904 11.904 23.253 26.197 31.701 43.093 8.533 17.067 13.995 36.608 13.995 58.411-0.171 31.189-8.704 61.312-24.192 87.424-19.755 33.195-50.773 59.819-89.813 73.557-44.459 15.616-91.093 11.733-130.432-7.125s-71.595-52.821-87.211-97.28c-7.851-22.229 3.84-46.592 26.069-54.4s46.592 3.883 54.4 26.069zM512 170.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667-42.667-19.115-42.667-42.667 19.115-42.667 42.667-42.667z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/frontend/src/app/style/icons/fonts/icomoon.ttf b/frontend/src/app/style/icons/fonts/icomoon.ttf
index 386796a5263a613d1a7ddf1b1f59782b20df4ae5..4dd77943d51fcf47f160324e2e4d8066d5e77ef3 100644
GIT binary patch
delta 1781
zcmcgtU1(cn7=FK;oRj~PpCvgtnQ2aw<^<}NC0UwONTMBD_Ty}ZT|vRQY__XqY3o*@
z16g*ZqZ@<uz`&v)yR(&nE6f|Ip;VBnC}IV@8eX_v$Sy>^n3DRw->Hc=f+(1ebKd9u
zdETGze0=$=dig*T7y!875(tnTd3Imk8<3ts%ZK=!Jl&|zDq~-L1i&6aee_KI{47cz
z>Ll%F&R&?fyRLnT`aHny-zUfGFQqRhJ^_f$p}#nZ2HU#OM*Th1`z9N6^Y^9^LF`L>
z{d{)j^iciI;@Uxgo((j-)~L_V!Z0iW#GgQ2o31y;-#qO24fT^)<n`H^^K;lJx$e^o
z1mVZ)t;gBmB0Itcji*`mz;+8jXn_Tw^cams^Zg^6mEweDp=GSGy6sP_Ti)ilAMKl#
zy&Zeo(%^Uu?dODJ9DhSGf@!Dts`UtK84K3WJFF98H}frf*r-LU#$9oR`!6A5Q5xcy
z*xyNJwJF51?E<$`wQIKV4t}_Ui92C8xo;u9W&f7PEK|JWIgTmjf#c;4KH)U;P|T)t
z&d$fjtuuyQM|lv9v*e0#ObxBMavk!oE|W}2Pr1#Z`1o#fD=2BgV>Z2n_@>9)7P5!s
z!EUiJS?eknWwRP(y(xd(sW$CB-ocyRS2?C?!@d>PTK&maXWT@|pAQ`D=35SESsKfN
z9uNUirF6-`*!0FmnZY*PL%EHzb4o0WnBn0LNx;1z5>rYFlFB>5mI?>_XyHl3BlC{X
zT0OjLi}%2am_ZM{&}nxe)XVW0+HZ&6@8GHMyByOPQN<joAMp+45VsTlL3xT}nkyeM
zH}h-6w<G4(5ci^b-M4dA!3%MC6sI(XB5|V{?S6?Hf58u;Uo_35zJ>FZpayS%fm0UJ
z8J5;@kw_+NGP6mzNQ8n)4^zUpNbJv-s;pGRMIs%fm}G)@0|m0}&r@6|h2AP71}Z!V
z<8m^o%~F<=tH?0xnRT#2v9v2+L~AmERl~xT!<me#nx>~lGnrg2lNn9vnx;mRPRHMS
zj+YAqS8BB@1BG%Iwf9JhS5El7VY}3n1dCu7m6G2lNpb(tq}?ysY;L!AZ%^-&v7U@e
z^7?(6G#XIV06uIbi-mPvi$~QyhtuikQ=@TB*RiE6wWO!0CDTLArpS}4T`f@k!qwUc
zqDlqP$T^>CvkB6K7<4<sZqX@<E>VeynhzW4O*ldxPs|tD6I6AlTa@K|uV0fyufKgw
z^;0W;)x6E<Mmv?9I`*Qs{0q47TjKBg!c2cxZhv6K!)x5%y{}m@{XB>+MIinEdz$~P
e7{fn{f72`<*9k!|{IOT;o;Gb6R8|*a>+BB&2%cI1

delta 1352
zcmah}U2IEX7=FL=bvxZkyNs<>sv~}qm6%C%lA2Ul7{XYakoY;a)%>&;CN>w=B_hi%
zB>E-7LL$P2Rs>79z#?Kd4H05ZxFL~nArS-@gn8bx)5D#Uym|kg=l%K4ch11d$Blg?
zh{#20l2o^G%c6QuW$AiE?m>37C5<j`{P_rxm;t|ak8!vQx&l6H=bi(-i3Lq}UGRH|
z{Hr=UjP_Zr_3wzLGk<9(0{TPw3;tL5b2^jVJ#SNiAkhpT{7(lCwndHGnH$YS0Ve{-
zl15J#t)?OPC*aqljAX~T=CYsgFQduHu7iiWF({tk0?w0^A5K45A;KB4PK4EZQMZzl
zcr>E$GG5KxkM;jz4vLeISs7C!!qC$cgB?=yv<rHH`em&)rt;cCy@>g(CG{*YaVgXx
z*`n9NF2K&qB=8|w3vQ!hofuSujwfJoHKBHt7<Ps0&T6&E=TL7-a_AP4X)rRSQM=o#
z(uIge<vzsSdas@xA49i(bxQBhuUVacz%FtV&Zypw4bEeO>&};UpHpR9^#O3x;C?LI
zYi^e2S;{+XOuoF^iNg|-KyGqvKq7>7LTbnrz(6sqBh-j%vEA&u3uLS4?nwsLpTOrQ
z@lk}#qnkasS5Jt99MYDkOOunRnUh&9r>flzXeQ81Tdv~n8g{0^iK*l6fYqU2U2>1w
z-BO;IZRb5l%&`ktr>P<*<_>?UFoeCyw#qes>t!oz>O_ii8ro6`(cJL-aG4OPM~@<c
z#_2uuI5a;(U_32@@qRGL8jnfB8}@<}vB27L(=e}=B!eRIqKpnVPZ<+>1FaQHWlGJf
z+OB7CXVThzHCQzZ_e7X)?pD=J+um1w)jBkx{N5w>TR-DnYuoR<tL?q&eZ9a7`2sKH
zmTwgHep%2ysN>U4S6FwFJQSo5wp3AHP&N8nZ1S0Z?2rDZAs!y``b5d%ou0@yayiU1
zc<n#h%Ep8qzvCb|s4fN;^+hJ~CWyZ*f**&ZAqC6MLf2Y;G5;@yv5dI}VY?l|`2ov^
zEs8v@$r#R~W}jI&F%e*p31mP~7>GC%%zO&kvdO>=Xh1Fl;Q?4s)EvA3&0O|b*fzyn
kwVbBXOxjH9+00}mB7AHSI!pYk!rw%Fu9-627Q7<<0H!7#=Kufz

diff --git a/frontend/src/app/style/icons/fonts/icomoon.woff b/frontend/src/app/style/icons/fonts/icomoon.woff
index d7c214a8a393af21d2c2bf8a21644b5e1cb889f9..9247ed75978315afd92fbfb819e760ef0f321fc4 100644
GIT binary patch
delta 1883
zcmcgtU5Fc16uvi;nMo$Uv-z1!+9Z=?lR$PiY|?B}>+V(;4ei$LrjP~{illYhwKTiy
zwqgrn;)_4+B6J62Efsvxhuu=p1qG2B$_i2uLAne2AhIvMNMHOx{K<OGo$bUIK@^<f
z<bLP7-?``9Gj}p82k%Y<pPQ~!2qkdEYsA4u8=?A(vEbD~U+d_pW@CX6ItvpuG^PIK
z$7dSnk^2aI+pc-foV#=yxD7(~{EqhRZSAw!nZ{FuL^_};p=Dl4d^!sxaKC`xk0##c
zy0gs-7YT{(1^-91@8$?OH-8FrM`K<fo=1Cs`PQLk<02%EErG8wtB`ARjpht+Hz4^-
zXm3o~e_NP8e*yMWG<6&xj{9DB(t~ur{un(1zbkZjVy6Rqhgb+HKfrnbKmUlcqK;eT
zI=W<Oi1+cL<xPgOzz4Y@lb__84A+6b#T{dK3pG}QNBw2%5!%tWte=}vt9-+~yE5^R
z!>~C$?(pe@!WxsbA?O?7VTN&mv}hze3-}4~65}!9*W!$cD>egT?0YsN_B!BSZC^3X
zD(dZzGmM%8($gkhm1aD>a$+P&GJ2Iu=npw2;S@kOpp*KtV`=~~?2hozRe6ZYv~Fqt
z(dOC%G+VFJY`2a51`QT1IrC<M31_dkn@*#vtV=GVV_4jr%h=d8!1r86_mDs7-amZ5
z2uw^BJ1r}gjnN&lLq<0&V*n@sI0x(zvtsYKBWCh@?oUkoq35`XgWhKu#zL08YqYaI
zE;lHnFz-8khkBd;xldz`1!tnZU1u4b%C5uG&iUdj{w=Pv{<?3IEk;YAS`3^p^KJzU
zQ62bh;9VCs3^3uy0C`YfP{R6F@Kv+2(~41L7S!9yVa6jagdSxW3wj}BwC*mh7&3N?
zySk%ZWvhb*j#-Qhu%~)C+-v&wU+{rFU$l(FzX|#>sgjq84oxj)ax{~M8;4{<bW>4)
z8;5{jiBcs9HxBy><#Adr!Hq-4kD6ox<3@_e?JJ-zkb>E9iV@&25$N)6bX(<N7Ca6S
zMm{4CWGIz=g%YsI1Y`|zn|3J~Ry8f1s^xO|d@ff@r8P|rCnfve&m12uj$El$uZ$E&
zd#F1oC?0o0_5^K0OW-V=jaSODR}f<IRMI93qUdybhNAIDBGH^f@W@_GsP(C89~fO5
zhQ#T#77MHWc1g1LtKpcIPD4q<SW-HLB^fhVYzk-c)ukflFD_N50ga6TnqKs(qR0s?
z-tUxxPF~`92d{*9%?pLZ6ZU}174e1!{c2ir@@{t_E^7ksk-M*{GL|B%#^J{o;AHab
zu_ryFKM@B!OSra+^V#0G^MMuKW$<nIrm_oSxDNg^f?l868*GgkfyOMV(EtCe_1}_F
n_`>{~V%c^j;wSov$TNMeF7}d)krnnGB*X%rP2c(tk+<oeC%dHZ

delta 1415
zcmah}TWl0n82-<kEoZyi?QQLDDK5);jXN{~CbYmJY$F?6>IFk5k;Ish?oyRq8ZLqQ
zK&J^I*f;hhrV>qj!G~P}LK98A@L<XdiP0E3i9ASxi7yz!i#}**{r<yr?3<f>d%pia
z-+wv(nVDNdbGuR}Un`YJ5PsP?iko$mgf8Zi=buYWj~=YLlSE<y8~Yh)=jZE(++*zf
z7Irj1=b^(>75Em2`d(seEPWH7D7)iCkF#bgBe#Fc?-Ovsw;T3T4E4QyI8i-*3O;D*
z0pqt?CVTkELFiu1aM2GKU)H}Esk*07IP(+i4F-GYLd~s~;X|M}%lLSt^`FTj$ByGX
zNE+xQn3VT)o7g1=^r+a2|2eT~2yXsaL<8FdGxNvfe|!;gNXUj9(=p3c9*u$9`l$7(
z@@Yoqtwo)Z{c1%sBCDzajU$D=F88TCxDTF+RH3(J9<j5Ly<%4TkslDn*@SMixa~m(
z>Y!mXr*rY7-ngcTg0}P!^y`{pSnwIu4}Vd<2mb*zr5ekNC^(~UtFpQj6fZ@~VeGYN
zQH|pepWqOGM}G;Mz1{kzI)_*fvD;(sn!|bAPORMVUprZPlAhJC%O~{i_(&9E6Oxdq
z9)HDl(3~%AYQa>y`bC#;EbpNwJzL}*N9310%+^Okc_fXsZ4Mh6YAY)zD15oi#gt4Q
zol5Y;Y%}3nVoFs+MP9I8(DxHnG~JX9tEt~<AKWBJpb2Xy7Z&MOF_5+v3d^)ig#~LT
zhydX$hHfo%WBO)$CMZ6m@3-Fw8~M6pEaa)q6J|0#rcv)~il^sa>~cjotk1h&#^Hl}
ze|2w&iW)U7?r41y2HLagFiLC$?de)Fr(7z?&t!4_qvWDcgETC*%9=jf^OmaP@$szh
zwBM7%BO}ZWF7;eZ1e_$<v_ns(`?R0>Fc^{0mGp`5Ik=l14*8beJz=Y-d#9im@)n+t
zrQRFh?@Qmhr*E!3pICjbwz<{WzI|cj-Bo=1x*u(RNq{?NS~kDkQTUVM5q@FlPTxs>
zTZ47^s|d+i{YU2c>B6IZ-ZSqN!FB)-@B`k!nh)%i{nZ-QvgQ)Nd>r8YbAb&mR^m7(
zYj__yr%mF@BL|C&kOeDXA^aR*_G?%JPA+bA5PNli8(<)*Y23%kv1~J#8<>;E=rLMP
cZ;;MptKIPM*a|dfzL}T<e`4paWG{+;0aL>twEzGB

diff --git a/frontend/src/app/style/icons/selection.json b/frontend/src/app/style/icons/selection.json
index 1c8f4697..7bc10917 100644
--- a/frontend/src/app/style/icons/selection.json
+++ b/frontend/src/app/style/icons/selection.json
@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M512 746q-74 0-133-41t-85-107h436q-26 66-85 107t-133 41zM362 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM662 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["insert_emoticon","tag_faces","mood"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":4,"prevSize":24,"code":59703,"name":"insert_emoticon"},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM554 298v172h172v84h-172v172h-84v-172h-172v-84h172v-172h84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["add_circle_outline","control_point"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":24,"code":59701,"name":"add_circle_outline"},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M726 554v-84h-172v-172h-84v172h-172v84h172v172h84v-172h172zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["add_circle"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":24,"code":59702,"name":"add_circle"},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M506 384h6q52 0 90 38t38 90v8zM322 418q-24 48-24 94 0 88 63 151t151 63q46 0 94-24l-66-66q-16 4-28 4-52 0-90-38t-38-90q0-12 4-28zM86 182l54-54 756 756-54 54q-10-10-63-62t-81-80q-86 36-186 36-158 0-286-88t-184-232q22-52 69-115t91-97q-24-24-67-68t-49-50zM512 298q-40 0-78 16l-92-92q78-30 170-30 158 0 285 88t183 232q-48 118-146 202l-124-124q16-38 16-78 0-88-63-151t-151-63z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["visibility_off"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"name":"visibility_off","prevSize":24,"code":59699},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M512 384q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM512 726q88 0 151-63t63-151-63-151-151-63-151 63-63 151 63 151 151 63zM512 192q158 0 286 88t184 232q-56 144-184 232t-286 88-286-88-184-232q56-144 184-232t286-88z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["remove_red_eye","visibility"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":0,"name":"remove_red_eye, visibility","prevSize":24,"code":59700},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M470 384v-86h84v86h-84zM512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM470 726v-256h84v256h-84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["info_outline"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":24,"code":59698,"name":"info_outline"},"setIdx":1,"setId":1,"iconIdx":0},{"icon":{"paths":["M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fullscreen_exit"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":24,"code":59696,"name":"fullscreen_exit"},"setIdx":1,"setId":1,"iconIdx":1},{"icon":{"paths":["M598 214h212v212h-84v-128h-128v-84zM726 726v-128h84v212h-212v-84h128zM214 426v-212h212v84h-128v128h-84zM298 598v128h128v84h-212v-212h84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fullscreen"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":0,"prevSize":24,"code":59697,"name":"fullscreen"},"setIdx":1,"setId":1,"iconIdx":2},{"icon":{"paths":["M896 810v-554h-384v554h384zM896 170q34 0 60 26t26 60v554q0 34-26 60t-60 26h-768q-34 0-60-26t-26-60v-554q0-34 26-60t60-26h768zM554 618h300v64h-300v-64zM554 406h300v64h-300v-64zM554 512h300v64h-300v-64z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chrome_reader_mode"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59695,"name":"topic"},"setIdx":1,"setId":1,"iconIdx":3},{"icon":{"paths":["M768 854v-428h-512v428h512zM380 256v86h264v-86q0-54-39-93t-93-39-93 39-39 93zM768 342q34 0 60 25t26 59v428q0 34-26 59t-60 25h-512q-34 0-60-25t-26-59v-428q0-34 26-59t60-25h42v-86q0-88 63-151t151-63 151 63 63 151v86h42zM512 726q-34 0-60-26t-26-60 26-60 60-26 60 26 26 60-26 60-60 26z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["lock_outline"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":24,"code":59693,"name":"lock_outline"},"setIdx":1,"setId":1,"iconIdx":4},{"icon":{"paths":["M768 854v-428h-512v428h512zM768 342q34 0 60 25t26 59v428q0 34-26 59t-60 25h-512q-34 0-60-25t-26-59v-428q0-34 26-59t60-25h388v-86q0-54-39-93t-93-39-93 39-39 93h-82q0-88 63-151t151-63 151 63 63 151v86h42zM512 726q-34 0-60-26t-26-60 26-60 60-26 60 26 26 60-26 60-60 26z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["lock_open"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":1,"prevSize":24,"code":59694,"name":"lock_open"},"setIdx":1,"setId":1,"iconIdx":5},{"icon":{"paths":["M384 690l452-452 60 60-512 512-238-238 60-60z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["check"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59692,"name":"check"},"setIdx":1,"setId":1,"iconIdx":6},{"icon":{"paths":["M316 658l-60-60 256-256 256 256-60 60-196-196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_up"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":24,"code":59686,"name":"keyboard_arrow_up"},"setIdx":1,"setId":1,"iconIdx":7},{"icon":{"paths":["M366 708l196-196-196-196 60-60 256 256-256 256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_right"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":24,"code":59687,"name":"keyboard_arrow_right"},"setIdx":1,"setId":1,"iconIdx":8},{"icon":{"paths":["M658 708l-60 60-256-256 256-256 60 60-196 196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_left"],"grid":24},"attrs":[{}],"properties":{"order":3,"id":1,"prevSize":24,"code":59688,"name":"keyboard_arrow_left"},"setIdx":1,"setId":1,"iconIdx":9},{"icon":{"paths":["M316 366l196 196 196-196 60 60-256 256-256-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_down"],"grid":24},"attrs":[{}],"properties":{"order":4,"id":0,"prevSize":24,"code":59689,"name":"keyboard_arrow_down"},"setIdx":1,"setId":1,"iconIdx":10},{"icon":{"paths":["M854 682v-512h-684v598l86-86h598zM854 86q34 0 59 25t25 59v512q0 34-25 60t-59 26h-598l-170 170v-768q0-34 25-59t59-25h684z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chat_bubble_outline"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59685,"name":"sms"},"setIdx":1,"setId":1,"iconIdx":11},{"icon":{"paths":["M726 682h170v214h-214v-130l-170-180-170 180v130h-214v-214h170l172-170v-136q-38-14-62-46t-24-74q0-52 38-90t90-38 90 38 38 90q0 42-24 74t-62 46v136z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["device_hub"],"grid":24},"attrs":[],"properties":{"ligatures":"device_hub","id":372,"order":38,"prevSize":24,"code":59681,"name":"device_hub"},"setIdx":1,"setId":1,"iconIdx":12},{"icon":{"paths":["M874 470q44 0 76 31t32 75-32 75-76 31h-64v172q0 34-25 59t-59 25h-162v-64q0-48-34-81t-82-33-82 33-34 81v64h-162q-34 0-59-25t-25-59v-162h64q48 0 81-34t33-82-33-82-81-34h-64v-162q0-34 25-59t59-25h172v-64q0-44 31-76t75-32 75 32 31 76v64h172q34 0 59 25t25 59v172h64z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["extension"],"grid":24},"attrs":[],"properties":{"ligatures":"extension","id":744,"order":40,"prevSize":24,"code":59683,"name":"extension"},"setIdx":1,"setId":1,"iconIdx":13},{"icon":{"paths":["M810 810v-170h-170v170h170zM554 554h342v342h-342v-342zM810 384v-170h-170v170h170zM554 128h342v342h-342v-342zM384 810v-170h-170v170h170zM128 554h342v342h-342v-342zM384 384v-170h-170v170h170zM128 128h342v342h-342v-342z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["grid_view"],"grid":24},"attrs":[],"properties":{"ligatures":"grid_view","id":994,"order":39,"prevSize":24,"code":59682,"name":"grid_view"},"setIdx":1,"setId":1,"iconIdx":14},{"icon":{"paths":["M810 128h-178q-14-38-46-62t-74-24-74 24-46 62h-178q-10 0-18 2-24 4-42 24-12 12-20 26-6 16-6 34v596q0 18 6 34 6 14 20 28 18 18 42 22 8 2 18 2h596q36 0 61-25t25-61v-596q0-36-25-61t-61-25zM470 604l-60 62-154-154 154-154 60 62-94 92zM512 182q-14 0-23-10t-9-22q0-14 9-23t23-9 23 9 9 23q0 12-9 22t-23 10zM614 666l-60-62 94-92-94-92 60-62 154 154z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["integration_instructions"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59680,"name":"integration_instructions"},"setIdx":1,"setId":1,"iconIdx":15},{"icon":{"paths":["M708 366l60 60-256 256-256-256 60-60 196 196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["expand_more"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":24,"code":59678,"name":"expand_more"},"setIdx":1,"setId":1,"iconIdx":16},{"icon":{"paths":["M512 342l256 256-60 60-196-196-196 196-60-60z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["expand_less"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":0,"prevSize":24,"code":59679,"name":"expand_less"},"setIdx":1,"setId":1,"iconIdx":17},{"icon":{"paths":["M622 708l198-196-198-196 60-60 256 256-256 256zM402 708l-60 60-256-256 256-256 60 60-198 196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["code"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59677,"name":"code"},"setIdx":1,"setId":1,"iconIdx":18},{"icon":{"paths":["M512 342h64v180l150 90-32 52-182-110v-212zM554 128q158 0 271 112t113 272-113 272-271 112q-66 0-145-33t-125-79l60-62q88 88 210 88 124 0 212-87t88-211-88-211-212-87-211 87-87 211h128l-172 172-4-6-166-166h128q0-160 113-272t271-112z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["history","restore"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59675,"name":"history"},"setIdx":1,"setId":1,"iconIdx":19},{"icon":{"paths":["M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM470 298h84v256h-84v-256zM470 640h84v86h-84v-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["error_outline"],"grid":24},"attrs":[],"properties":{"order":29,"ligatures":"error_outline","id":1,"prevSize":24,"code":59668,"name":"error_outline"},"setIdx":1,"setId":1,"iconIdx":20},{"icon":{"paths":["M512 768v-128l170 170-170 172v-128q-140 0-241-101t-101-241q0-100 54-182l62 62q-30 54-30 120 0 106 75 181t181 75zM512 170q140 0 241 101t101 241q0 100-54 182l-62-62q30-54 30-120 0-106-75-181t-181-75v128l-170-170 170-172v128z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["loop","sync"],"grid":24},"attrs":[],"properties":{"order":20,"ligatures":"loop, sync","id":15,"prevSize":24,"code":59661,"name":"loop"},"setIdx":1,"setId":1,"iconIdx":21},{"icon":{"paths":["M768 342v-86h-512v86h512zM768 470v-86h-512v86h512zM768 598v-86h-512v86h512zM854 86q34 0 59 25t25 59v512q0 34-25 60t-59 26h-598l-170 170v-768q0-34 25-59t59-25h684z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["message"],"grid":24},"attrs":[],"properties":{"order":7,"ligatures":"message","id":108,"prevSize":24,"code":59648,"name":"message"},"setIdx":1,"setId":1,"iconIdx":22},{"icon":{"paths":["M726 470v-86h-86v86h86zM554 470v-86h-84v86h84zM384 470v-86h-86v86h86zM854 86q34 0 59 25t25 59v512q0 34-25 60t-59 26h-598l-170 170v-768q0-34 25-59t59-25h684z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["textsms","sms"],"grid":24},"attrs":[],"properties":{"order":24,"ligatures":"textsms, sms","id":121,"prevSize":24,"code":59665,"name":"sms2"},"setIdx":1,"setId":1,"iconIdx":23},{"icon":{"paths":["M512 470l342-214h-684zM854 768v-426l-342 212-342-212v426h684zM854 170q34 0 59 26t25 60v512q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h684z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["mail_outline"],"grid":24},"attrs":[],"properties":{"order":15,"ligatures":"mail_outline","id":130,"prevSize":24,"code":59656,"name":"mail_outline, email"},"setIdx":1,"setId":1,"iconIdx":24},{"icon":{"paths":["M512 640q52 0 90-38t38-90-38-90-90-38-90 38-38 90 38 90 90 38zM512 86q176 0 301 125t125 301v62q0 64-43 108t-105 44q-78 0-126-64-64 64-152 64t-151-63-63-151 63-151 151-63 151 63 63 151v62q0 26 19 46t45 20 45-20 19-46v-62q0-140-101-241t-241-101-241 101-101 241 101 241 241 101h214v84h-214q-176 0-301-125t-125-301 125-301 301-125z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["alternate_email"],"grid":24},"attrs":[],"properties":{"order":16,"ligatures":"alternate_email","id":135,"prevSize":24,"code":59657,"name":"alternate_email"},"setIdx":1,"setId":1,"iconIdx":25},{"icon":{"paths":["M512 448l298-150v-84l-298 148-298-148v84zM578 726h-364q-34 0-60-26t-26-60v-426q0-34 26-60t60-26h596q34 0 60 26t26 60v306q-54-30-106-30-88 0-151 63t-63 151q0 4 1 11t1 11zM874 726v-44h-170v44h170zM790 554q62 0 105 44t43 106-43 106-105 44-106-44-44-106 44-106 106-44z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["unsubscribe"],"grid":24},"attrs":[],"properties":{"order":13,"ligatures":"unsubscribe","id":140,"prevSize":24,"code":59649,"name":"unsubscribe"},"setIdx":1,"setId":1,"iconIdx":26},{"icon":{"paths":["M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["add"],"grid":24},"attrs":[],"properties":{"order":10,"ligatures":"add","id":146,"prevSize":24,"code":59650,"name":"add"},"setIdx":1,"setId":1,"iconIdx":27},{"icon":{"paths":["M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["clear","close"],"grid":24},"attrs":[],"properties":{"order":19,"ligatures":"clear, close","id":153,"prevSize":24,"code":59659,"name":"clear"},"setIdx":1,"setId":1,"iconIdx":28},{"icon":{"paths":["M884 300l-78 78-160-160 78-78q12-12 30-12t30 12l100 100q12 12 12 30t-12 30zM128 736l472-472 160 160-472 472h-160v-160z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["create","mode_edit","edit"],"grid":24},"attrs":[],"properties":{"order":17,"ligatures":"create, mode_edit, edit","id":157,"prevSize":24,"code":59658,"name":"create"},"setIdx":1,"setId":1,"iconIdx":29},{"icon":{"paths":["M810 640v-426h-598v426h172q0 52 38 90t90 38 90-38 38-90h170zM810 128q36 0 61 25t25 61v596q0 34-26 60t-60 26h-598q-36 0-60-25t-24-61v-596q0-36 24-61t60-25h598z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["inbox"],"grid":24},"attrs":[],"properties":{"order":32,"ligatures":"inbox","id":163,"prevSize":24,"code":59672,"name":"inbox"},"setIdx":1,"setId":1,"iconIdx":30},{"icon":{"paths":["M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM298 470h428v84h-428v-84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["remove_circle_outline"],"grid":24},"attrs":[],"properties":{"order":12,"ligatures":"remove_circle_outline","id":168,"prevSize":24,"code":59651,"name":"remove_circle_outline"},"setIdx":1,"setId":1,"iconIdx":31},{"icon":{"paths":["M86 896v-298l640-86-640-86v-298l896 384z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["send"],"grid":24},"attrs":[],"properties":{"order":31,"ligatures":"send","id":174,"prevSize":24,"code":59670,"name":"send"},"setIdx":1,"setId":1,"iconIdx":32},{"icon":{"paths":["M598 512h234l-234-234v234zM640 214l256 256v426q0 34-26 60t-60 26h-470q-34 0-59-26t-25-60v-598q0-34 26-59t60-25h298zM682 42v86h-512v598h-84v-598q0-34 25-60t59-26h512z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["file_copy"],"grid":24},"attrs":[],"properties":{"order":35,"ligatures":"file_copy","id":190,"prevSize":24,"code":59673,"name":"file_copy"},"setIdx":1,"setId":1,"iconIdx":33},{"icon":{"paths":["M300 574l252-252 54 54-308 306-162-162 54-54zM810 42q34 0 60 26t26 60v768q0 34-26 60t-60 26h-426q-34 0-60-26t-26-60v-128h86v86h426v-684h-426v86h-86v-128q0-34 26-60t60-26h426z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["mobile_friendly"],"grid":24},"attrs":[],"properties":{"order":25,"ligatures":"mobile_friendly","id":247,"prevSize":24,"code":59666,"name":"mobile, mobilepush"},"setIdx":1,"setId":1,"iconIdx":34},{"icon":{"paths":["M214 598l298-300 298 300h-170v256h-256v-256h-170zM214 170h596v86h-596v-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["publish"],"grid":24},"attrs":[],"properties":{"order":30,"ligatures":"publish","id":294,"prevSize":24,"code":59671,"name":"publish"},"setIdx":1,"setId":1,"iconIdx":35},{"icon":{"paths":["M214 726h596l-192-256-148 192-108-128zM896 128q32 0 59 27t27 59v596q0 32-27 59t-59 27h-768q-34 0-60-26t-26-60v-596q0-32 27-59t59-27h768z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["photo_size_select_actual"],"grid":24},"attrs":[],"properties":{"order":34,"ligatures":"photo_size_select_actual","id":506,"prevSize":24,"code":59674,"name":"photo_size_select_actual"},"setIdx":1,"setId":1,"iconIdx":36},{"icon":{"paths":["M754 270l100-100v300h-300l138-138q-76-76-180-76-106 0-181 75t-75 181 75 181 181 75q74 0 145-50t97-120h88q-28 112-120 184t-210 72q-140 0-240-100t-100-242 100-242 240-100q60 0 131 29t111 71z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["refresh"],"grid":24},"attrs":[],"properties":{"order":21,"ligatures":"refresh","id":603,"prevSize":24,"code":59662,"name":"refresh"},"setIdx":1,"setId":1,"iconIdx":37},{"icon":{"paths":["M512 598q108 0 225 47t117 123v86h-684v-86q0-76 117-123t225-47zM512 512q-70 0-120-50t-50-120 50-121 120-51 120 51 50 121-50 120-120 50z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["person"],"grid":24},"attrs":[],"properties":{"order":9,"ligatures":"person","id":685,"prevSize":24,"code":59652,"name":"person"},"setIdx":1,"setId":1,"iconIdx":38},{"icon":{"paths":["M640 598q108 0 225 47t117 123v86h-684v-86q0-76 117-123t225-47zM256 426h128v86h-128v128h-86v-128h-128v-86h128v-128h86v128zM640 512q-70 0-120-50t-50-120 50-121 120-51 120 51 50 121-50 120-120 50z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["person_add"],"grid":24},"attrs":[],"properties":{"order":8,"ligatures":"person_add","id":686,"prevSize":24,"code":59653,"name":"person_add"},"setIdx":1,"setId":1,"iconIdx":39},{"icon":{"paths":["M554 128h342v256h-342v-256zM554 896v-426h342v426h-342zM128 896v-256h342v256h-342zM128 554v-426h342v426h-342z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["dashboard"],"grid":24},"attrs":[],"properties":{"order":22,"ligatures":"dashboard","id":736,"prevSize":24,"code":59663,"name":"dashboard"},"setIdx":1,"setId":1,"iconIdx":40},{"icon":{"paths":["M810 170v86h-596v-86h148l44-42h212l44 42h148zM256 810v-512h512v512q0 34-26 60t-60 26h-340q-34 0-60-26t-26-60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["delete"],"grid":24},"attrs":[],"properties":{"order":11,"ligatures":"delete","id":737,"prevSize":24,"code":59654,"name":"delete"},"setIdx":1,"setId":1,"iconIdx":41},{"icon":{"paths":["M512 490l170-170v-150h-340v150zM682 704l-170-170-170 170v150h340v-150zM256 86h512v256l-170 170 170 170v256h-512v-256l170-170-170-170v-256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["hourglass_empty"],"grid":24},"attrs":[],"properties":{"order":28,"ligatures":"hourglass_empty","id":757,"prevSize":24,"code":59669,"name":"hourglass_empty"},"setIdx":1,"setId":1,"iconIdx":42},{"icon":{"paths":["M512 426l170 172h-128v256h-84v-256h-128zM810 170q36 0 61 25t25 61v512q0 34-26 60t-60 26h-170v-86h170v-426h-596v426h170v86h-170q-36 0-61-25t-25-61v-512q0-36 25-61t61-25h596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["open_in_browser"],"grid":24},"attrs":[],"properties":{"order":26,"ligatures":"open_in_browser","id":774,"prevSize":24,"code":59667,"name":"browser, webpush"},"setIdx":1,"setId":1,"iconIdx":43},{"icon":{"paths":["M406 598q80 0 136-56t56-136-56-136-136-56-136 56-56 136 56 136 136 56zM662 598l212 212-64 64-212-212v-34l-12-12q-76 66-180 66-116 0-197-80t-81-196 81-197 197-81 196 81 80 197q0 42-20 95t-46 85l12 12h34z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["search"],"grid":24},"attrs":[],"properties":{"order":18,"ligatures":"search","id":789,"prevSize":24,"code":59660,"name":"search"},"setIdx":1,"setId":1,"iconIdx":44},{"icon":{"paths":["M512 662q62 0 106-44t44-106-44-106-106-44-106 44-44 106 44 106 106 44zM830 554l90 70q14 10 4 28l-86 148q-8 14-26 8l-106-42q-42 30-72 42l-16 112q-4 18-20 18h-172q-16 0-20-18l-16-112q-38-16-72-42l-106 42q-18 6-26-8l-86-148q-10-18 4-28l90-70q-2-14-2-42t2-42l-90-70q-14-10-4-28l86-148q8-14 26-8l106 42q42-30 72-42l16-112q4-18 20-18h172q16 0 20 18l16 112q38 16 72 42l106-42q18-6 26 8l86 148q10 18-4 28l-90 70q2 14 2 42t-2 42z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["settings"],"grid":24},"attrs":[],"properties":{"order":23,"ligatures":"settings","id":790,"prevSize":24,"code":59664,"name":"settings"},"setIdx":1,"setId":1,"iconIdx":45},{"icon":{"paths":["M292.571 713.143v128c0 20-16.571 36.571-36.571 36.571h-146.286c-20 0-36.571-16.571-36.571-36.571v-128c0-20 16.571-36.571 36.571-36.571h146.286c20 0 36.571 16.571 36.571 36.571zM309.714 109.714l-16 438.857c-0.571 20-17.714 36.571-37.714 36.571h-146.286c-20 0-37.143-16.571-37.714-36.571l-16-438.857c-0.571-20 15.429-36.571 35.429-36.571h182.857c20 0 36 16.571 35.429 36.571z"],"attrs":[{}],"width":366,"isMulticolor":false,"isMulticolor2":false,"tags":["exclamation"],"grid":14},"attrs":[{}],"properties":{"order":1,"id":0,"name":"exclamation","prevSize":28,"code":59691},"setIdx":1,"setId":1,"iconIdx":46},{"icon":{"paths":["M446.293 810.667c-62.293 88.32-183.893 110.507-271.787 49.067-87.467-61.44-107.947-183.893-46.507-273.067 37.12-53.333 94.293-81.92 152.747-84.48l2.133 61.013c-38.827 2.987-76.373 23.040-100.693 58.027-42.667 61.44-29.44 144.213 29.013 185.6 58.88 40.96 141.227 25.173 183.893-35.84 13.227-19.2 20.907-40.107 23.893-61.44v-43.093l238.080-1.707 2.987-4.693c22.613-39.253 71.68-52.907 110.080-30.72s51.627 71.68 29.013 110.933c-22.613 38.827-72.107 52.48-110.507 30.293-17.493-9.813-29.867-25.6-35.413-43.52l-173.653 0.853c-4.693 28.587-15.787 56.32-33.28 82.773zM756.907 506.027c107.947 13.227 184.747 110.080 171.52 216.32-13.227 106.667-111.36 182.187-219.307 168.96-63.573-7.68-116.053-43.947-146.347-94.293l52.907-30.72c20.907 32.853 56.32 56.32 98.987 61.867 74.667 8.96 140.8-41.813 149.76-113.067s-43.947-136.533-117.76-145.493c-23.040-2.56-45.227 0.427-65.28 7.68l-36.267 18.773-110.080-203.52h-9.387c-45.227-1.707-80.213-38.827-78.933-83.2s39.68-78.933 84.48-77.227c44.8 2.56 80.213 38.827 78.933 83.2-0.853 18.773-8.107 35.84-19.627 49.067l81.067 149.76c26.453-8.533 55.467-11.52 85.333-8.107zM352 389.973c-42.667-100.267 2.56-215.040 101.12-256.853 98.987-41.813 213.333 5.547 256 105.813 25.173 58.453 20.053 122.453-8.533 173.653l-52.907-30.72c17.92-34.56 20.907-76.8 3.84-116.48-29.013-68.267-106.24-101.12-172.373-73.387-66.56 28.16-96.427 106.667-67.413 174.933 11.947 28.16 32 49.92 56.32 64.427l16.64 8.96-130.987 212.907c1.28 2.133 2.987 4.693 4.267 8.107 20.907 38.827 6.4 87.893-32.853 108.8-38.827 20.907-87.893 5.547-109.227-34.56-20.907-39.68-6.4-88.747 32.853-109.653 16.64-8.96 34.987-11.093 52.48-7.253l98.56-160.853c-20.053-18.347-37.12-41.387-47.787-67.84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":14,"tags":["webhook_icon_138018"]},"attrs":[{}],"properties":{"order":41,"id":995,"name":"webhook","prevSize":28,"code":59690},"setIdx":1,"setId":1,"iconIdx":47},{"icon":{"paths":["M365.714 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM585.143 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM804.571 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM512 219.429c-237.714 0-438.857 133.714-438.857 292.571 0 85.143 57.143 166.286 156 222.286l49.714 28.571-15.429 54.857c-10.857 40.571-25.143 72-40 98.286 57.714-24 110.286-56.571 157.143-97.714l24.571-21.714 32.571 3.429c24.571 2.857 49.714 4.571 74.286 4.571 237.714 0 438.857-133.714 438.857-292.571s-201.143-292.571-438.857-292.571zM1024 512c0 202.286-229.143 365.714-512 365.714-28 0-56-1.714-82.857-4.571-74.857 66.286-164 113.143-262.857 138.286-20.571 5.714-42.857 9.714-65.143 12.571h-2.857c-11.429 0-21.714-9.143-24.571-21.714v-0.571c-2.857-14.286 6.857-22.857 15.429-33.143 36-40.571 77.143-74.857 104-170.286-117.714-66.857-193.143-170.286-193.143-286.286 0-201.714 229.143-365.714 512-365.714v0c282.857 0 512 164 512 365.714z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["commenting-o"],"grid":14},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":28,"code":59684,"name":"messaging"},"setIdx":1,"setId":1,"iconIdx":48},{"icon":{"paths":["M204.8 614.4c-56.554 0-102.4-45.846-102.4-102.4s45.846-102.4 102.4-102.4v0c56.554 0 102.4 45.846 102.4 102.4s-45.846 102.4-102.4 102.4v0zM512 614.4c-56.554 0-102.4-45.846-102.4-102.4s45.846-102.4 102.4-102.4v0c56.554 0 102.4 45.846 102.4 102.4s-45.846 102.4-102.4 102.4v0zM819.2 614.4c-56.554 0-102.4-45.846-102.4-102.4s45.846-102.4 102.4-102.4v0c56.554 0 102.4 45.846 102.4 102.4s-45.846 102.4-102.4 102.4v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["navigation-more"],"grid":20},"attrs":[{}],"properties":{"order":1,"id":0,"name":"more","prevSize":20,"code":59676},"setIdx":1,"setId":1,"iconIdx":49},{"icon":{"paths":["M512 1024c-136.76 0-265.334-53.258-362.040-149.96-96.702-96.706-149.96-225.28-149.96-362.040 0-96.838 27.182-191.134 78.606-272.692 50-79.296 120.664-143.372 204.356-185.3l43 85.832c-68.038 34.084-125.492 86.186-166.15 150.67-41.746 66.208-63.812 142.798-63.812 221.49 0 229.382 186.618 416 416 416s416-186.618 416-416c0-78.692-22.066-155.282-63.81-221.49-40.66-64.484-98.114-116.584-166.15-150.67l43-85.832c83.692 41.928 154.358 106.004 204.356 185.3 51.422 81.558 78.604 175.854 78.604 272.692 0 136.76-53.258 265.334-149.96 362.040-96.706 96.702-225.28 149.96-362.040 149.96z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["spinner","loading","loading-wheel","busy","wait"],"grid":16},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":16,"code":59655,"name":"spinner"},"setIdx":1,"setId":1,"iconIdx":50}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"name":"icomoon","classSelector":".icon"},"historySize":50}}
\ No newline at end of file
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M981.333 512c0-129.579-52.565-246.997-137.472-331.861s-202.283-137.472-331.861-137.472-246.997 52.565-331.861 137.472-137.472 202.283-137.472 331.861 52.565 246.997 137.472 331.861 202.283 137.472 331.861 137.472 246.997-52.565 331.861-137.472 137.472-202.283 137.472-331.861zM896 512c0 106.069-42.923 201.984-112.469 271.531s-165.461 112.469-271.531 112.469-201.984-42.923-271.531-112.469-112.469-165.461-112.469-271.531 42.923-201.984 112.469-271.531 165.461-112.469 271.531-112.469 201.984 42.923 271.531 112.469 112.469 165.461 112.469 271.531zM428.075 398.165c7.808-22.229 23.851-39.168 43.605-48.64s42.965-11.392 65.195-3.541c19.541 6.869 34.944 20.053 44.8 36.651 7.808 13.099 12.117 28.373 12.203 44.245 0 6.613-1.664 13.184-4.992 19.797-3.413 6.827-8.661 13.867-15.701 20.907-30.251 30.251-78.123 46.592-78.123 46.592-22.357 7.467-34.432 31.616-26.965 53.973s31.616 34.432 53.973 26.965c0 0 65.877-21.589 111.488-67.2 11.904-11.904 23.253-26.197 31.701-43.093 8.533-17.067 13.995-36.608 13.995-58.411-0.171-31.189-8.704-61.312-24.192-87.424-19.755-33.195-50.773-59.819-89.813-73.557-44.459-15.616-91.093-11.733-130.432 7.125s-71.595 52.821-87.211 97.28c-7.851 22.229 3.84 46.592 26.069 54.4s46.592-3.883 54.4-26.069zM512 768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667-42.667 19.115-42.667 42.667 19.115 42.667 42.667 42.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["help-circle"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59704,"name":"help-circle"},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M512 746q-74 0-133-41t-85-107h436q-26 66-85 107t-133 41zM362 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM662 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["insert_emoticon","tag_faces","mood"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":4,"prevSize":24,"code":59703,"name":"insert_emoticon"},"setIdx":1,"setId":1,"iconIdx":0},{"icon":{"paths":["M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM554 298v172h172v84h-172v172h-84v-172h-172v-84h172v-172h84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["add_circle_outline","control_point"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":24,"code":59701,"name":"add_circle_outline"},"setIdx":1,"setId":1,"iconIdx":1},{"icon":{"paths":["M726 554v-84h-172v-172h-84v172h-172v84h172v172h84v-172h172zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["add_circle"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":24,"code":59702,"name":"add_circle"},"setIdx":1,"setId":1,"iconIdx":2},{"icon":{"paths":["M506 384h6q52 0 90 38t38 90v8zM322 418q-24 48-24 94 0 88 63 151t151 63q46 0 94-24l-66-66q-16 4-28 4-52 0-90-38t-38-90q0-12 4-28zM86 182l54-54 756 756-54 54q-10-10-63-62t-81-80q-86 36-186 36-158 0-286-88t-184-232q22-52 69-115t91-97q-24-24-67-68t-49-50zM512 298q-40 0-78 16l-92-92q78-30 170-30 158 0 285 88t183 232q-48 118-146 202l-124-124q16-38 16-78 0-88-63-151t-151-63z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["visibility_off"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"name":"visibility_off","prevSize":24,"code":59699},"setIdx":1,"setId":1,"iconIdx":3},{"icon":{"paths":["M512 384q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM512 726q88 0 151-63t63-151-63-151-151-63-151 63-63 151 63 151 151 63zM512 192q158 0 286 88t184 232q-56 144-184 232t-286 88-286-88-184-232q56-144 184-232t286-88z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["remove_red_eye","visibility"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":0,"name":"remove_red_eye, visibility","prevSize":24,"code":59700},"setIdx":1,"setId":1,"iconIdx":4},{"icon":{"paths":["M470 384v-86h84v86h-84zM512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM470 726v-256h84v256h-84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["info_outline"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":24,"code":59698,"name":"info_outline"},"setIdx":1,"setId":1,"iconIdx":5},{"icon":{"paths":["M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fullscreen_exit"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":24,"code":59696,"name":"fullscreen_exit"},"setIdx":1,"setId":1,"iconIdx":6},{"icon":{"paths":["M598 214h212v212h-84v-128h-128v-84zM726 726v-128h84v212h-212v-84h128zM214 426v-212h212v84h-128v128h-84zM298 598v128h128v84h-212v-212h84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["fullscreen"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":0,"prevSize":24,"code":59697,"name":"fullscreen"},"setIdx":1,"setId":1,"iconIdx":7},{"icon":{"paths":["M896 810v-554h-384v554h384zM896 170q34 0 60 26t26 60v554q0 34-26 60t-60 26h-768q-34 0-60-26t-26-60v-554q0-34 26-60t60-26h768zM554 618h300v64h-300v-64zM554 406h300v64h-300v-64zM554 512h300v64h-300v-64z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chrome_reader_mode"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59695,"name":"topic"},"setIdx":1,"setId":1,"iconIdx":8},{"icon":{"paths":["M768 854v-428h-512v428h512zM380 256v86h264v-86q0-54-39-93t-93-39-93 39-39 93zM768 342q34 0 60 25t26 59v428q0 34-26 59t-60 25h-512q-34 0-60-25t-26-59v-428q0-34 26-59t60-25h42v-86q0-88 63-151t151-63 151 63 63 151v86h42zM512 726q-34 0-60-26t-26-60 26-60 60-26 60 26 26 60-26 60-60 26z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["lock_outline"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":24,"code":59693,"name":"lock_outline"},"setIdx":1,"setId":1,"iconIdx":9},{"icon":{"paths":["M768 854v-428h-512v428h512zM768 342q34 0 60 25t26 59v428q0 34-26 59t-60 25h-512q-34 0-60-25t-26-59v-428q0-34 26-59t60-25h388v-86q0-54-39-93t-93-39-93 39-39 93h-82q0-88 63-151t151-63 151 63 63 151v86h42zM512 726q-34 0-60-26t-26-60 26-60 60-26 60 26 26 60-26 60-60 26z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["lock_open"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":1,"prevSize":24,"code":59694,"name":"lock_open"},"setIdx":1,"setId":1,"iconIdx":10},{"icon":{"paths":["M384 690l452-452 60 60-512 512-238-238 60-60z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["check"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59692,"name":"check"},"setIdx":1,"setId":1,"iconIdx":11},{"icon":{"paths":["M316 658l-60-60 256-256 256 256-60 60-196-196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_up"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":24,"code":59686,"name":"keyboard_arrow_up"},"setIdx":1,"setId":1,"iconIdx":12},{"icon":{"paths":["M366 708l196-196-196-196 60-60 256 256-256 256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_right"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":24,"code":59687,"name":"keyboard_arrow_right"},"setIdx":1,"setId":1,"iconIdx":13},{"icon":{"paths":["M658 708l-60 60-256-256 256-256 60 60-196 196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_left"],"grid":24},"attrs":[{}],"properties":{"order":3,"id":1,"prevSize":24,"code":59688,"name":"keyboard_arrow_left"},"setIdx":1,"setId":1,"iconIdx":14},{"icon":{"paths":["M316 366l196 196 196-196 60 60-256 256-256-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_down"],"grid":24},"attrs":[{}],"properties":{"order":4,"id":0,"prevSize":24,"code":59689,"name":"keyboard_arrow_down"},"setIdx":1,"setId":1,"iconIdx":15},{"icon":{"paths":["M854 682v-512h-684v598l86-86h598zM854 86q34 0 59 25t25 59v512q0 34-25 60t-59 26h-598l-170 170v-768q0-34 25-59t59-25h684z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["chat_bubble_outline"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59685,"name":"sms"},"setIdx":1,"setId":1,"iconIdx":16},{"icon":{"paths":["M726 682h170v214h-214v-130l-170-180-170 180v130h-214v-214h170l172-170v-136q-38-14-62-46t-24-74q0-52 38-90t90-38 90 38 38 90q0 42-24 74t-62 46v136z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["device_hub"],"grid":24},"attrs":[],"properties":{"ligatures":"device_hub","id":372,"order":38,"prevSize":24,"code":59681,"name":"device_hub"},"setIdx":1,"setId":1,"iconIdx":17},{"icon":{"paths":["M874 470q44 0 76 31t32 75-32 75-76 31h-64v172q0 34-25 59t-59 25h-162v-64q0-48-34-81t-82-33-82 33-34 81v64h-162q-34 0-59-25t-25-59v-162h64q48 0 81-34t33-82-33-82-81-34h-64v-162q0-34 25-59t59-25h172v-64q0-44 31-76t75-32 75 32 31 76v64h172q34 0 59 25t25 59v172h64z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["extension"],"grid":24},"attrs":[],"properties":{"ligatures":"extension","id":744,"order":40,"prevSize":24,"code":59683,"name":"extension"},"setIdx":1,"setId":1,"iconIdx":18},{"icon":{"paths":["M810 810v-170h-170v170h170zM554 554h342v342h-342v-342zM810 384v-170h-170v170h170zM554 128h342v342h-342v-342zM384 810v-170h-170v170h170zM128 554h342v342h-342v-342zM384 384v-170h-170v170h170zM128 128h342v342h-342v-342z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["grid_view"],"grid":24},"attrs":[],"properties":{"ligatures":"grid_view","id":994,"order":39,"prevSize":24,"code":59682,"name":"grid_view"},"setIdx":1,"setId":1,"iconIdx":19},{"icon":{"paths":["M810 128h-178q-14-38-46-62t-74-24-74 24-46 62h-178q-10 0-18 2-24 4-42 24-12 12-20 26-6 16-6 34v596q0 18 6 34 6 14 20 28 18 18 42 22 8 2 18 2h596q36 0 61-25t25-61v-596q0-36-25-61t-61-25zM470 604l-60 62-154-154 154-154 60 62-94 92zM512 182q-14 0-23-10t-9-22q0-14 9-23t23-9 23 9 9 23q0 12-9 22t-23 10zM614 666l-60-62 94-92-94-92 60-62 154 154z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["integration_instructions"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59680,"name":"integration_instructions"},"setIdx":1,"setId":1,"iconIdx":20},{"icon":{"paths":["M708 366l60 60-256 256-256-256 60-60 196 196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["expand_more"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":24,"code":59678,"name":"expand_more"},"setIdx":1,"setId":1,"iconIdx":21},{"icon":{"paths":["M512 342l256 256-60 60-196-196-196 196-60-60z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["expand_less"],"grid":24},"attrs":[{}],"properties":{"order":2,"id":0,"prevSize":24,"code":59679,"name":"expand_less"},"setIdx":1,"setId":1,"iconIdx":22},{"icon":{"paths":["M622 708l198-196-198-196 60-60 256 256-256 256zM402 708l-60 60-256-256 256-256 60 60-198 196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["code"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59677,"name":"code"},"setIdx":1,"setId":1,"iconIdx":23},{"icon":{"paths":["M512 342h64v180l150 90-32 52-182-110v-212zM554 128q158 0 271 112t113 272-113 272-271 112q-66 0-145-33t-125-79l60-62q88 88 210 88 124 0 212-87t88-211-88-211-212-87-211 87-87 211h128l-172 172-4-6-166-166h128q0-160 113-272t271-112z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["history","restore"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59675,"name":"history"},"setIdx":1,"setId":1,"iconIdx":24},{"icon":{"paths":["M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM470 298h84v256h-84v-256zM470 640h84v86h-84v-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["error_outline"],"grid":24},"attrs":[],"properties":{"order":29,"ligatures":"error_outline","id":1,"prevSize":24,"code":59668,"name":"error_outline"},"setIdx":1,"setId":1,"iconIdx":25},{"icon":{"paths":["M512 768v-128l170 170-170 172v-128q-140 0-241-101t-101-241q0-100 54-182l62 62q-30 54-30 120 0 106 75 181t181 75zM512 170q140 0 241 101t101 241q0 100-54 182l-62-62q30-54 30-120 0-106-75-181t-181-75v128l-170-170 170-172v128z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["loop","sync"],"grid":24},"attrs":[],"properties":{"order":20,"ligatures":"loop, sync","id":15,"prevSize":24,"code":59661,"name":"loop"},"setIdx":1,"setId":1,"iconIdx":26},{"icon":{"paths":["M768 342v-86h-512v86h512zM768 470v-86h-512v86h512zM768 598v-86h-512v86h512zM854 86q34 0 59 25t25 59v512q0 34-25 60t-59 26h-598l-170 170v-768q0-34 25-59t59-25h684z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["message"],"grid":24},"attrs":[],"properties":{"order":7,"ligatures":"message","id":108,"prevSize":24,"code":59648,"name":"message"},"setIdx":1,"setId":1,"iconIdx":27},{"icon":{"paths":["M726 470v-86h-86v86h86zM554 470v-86h-84v86h84zM384 470v-86h-86v86h86zM854 86q34 0 59 25t25 59v512q0 34-25 60t-59 26h-598l-170 170v-768q0-34 25-59t59-25h684z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["textsms","sms"],"grid":24},"attrs":[],"properties":{"order":24,"ligatures":"textsms, sms","id":121,"prevSize":24,"code":59665,"name":"sms2"},"setIdx":1,"setId":1,"iconIdx":28},{"icon":{"paths":["M512 470l342-214h-684zM854 768v-426l-342 212-342-212v426h684zM854 170q34 0 59 26t25 60v512q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h684z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["mail_outline"],"grid":24},"attrs":[],"properties":{"order":15,"ligatures":"mail_outline","id":130,"prevSize":24,"code":59656,"name":"mail_outline, email"},"setIdx":1,"setId":1,"iconIdx":29},{"icon":{"paths":["M512 640q52 0 90-38t38-90-38-90-90-38-90 38-38 90 38 90 90 38zM512 86q176 0 301 125t125 301v62q0 64-43 108t-105 44q-78 0-126-64-64 64-152 64t-151-63-63-151 63-151 151-63 151 63 63 151v62q0 26 19 46t45 20 45-20 19-46v-62q0-140-101-241t-241-101-241 101-101 241 101 241 241 101h214v84h-214q-176 0-301-125t-125-301 125-301 301-125z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["alternate_email"],"grid":24},"attrs":[],"properties":{"order":16,"ligatures":"alternate_email","id":135,"prevSize":24,"code":59657,"name":"alternate_email"},"setIdx":1,"setId":1,"iconIdx":30},{"icon":{"paths":["M512 448l298-150v-84l-298 148-298-148v84zM578 726h-364q-34 0-60-26t-26-60v-426q0-34 26-60t60-26h596q34 0 60 26t26 60v306q-54-30-106-30-88 0-151 63t-63 151q0 4 1 11t1 11zM874 726v-44h-170v44h170zM790 554q62 0 105 44t43 106-43 106-105 44-106-44-44-106 44-106 106-44z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["unsubscribe"],"grid":24},"attrs":[],"properties":{"order":13,"ligatures":"unsubscribe","id":140,"prevSize":24,"code":59649,"name":"unsubscribe"},"setIdx":1,"setId":1,"iconIdx":31},{"icon":{"paths":["M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["add"],"grid":24},"attrs":[],"properties":{"order":10,"ligatures":"add","id":146,"prevSize":24,"code":59650,"name":"add"},"setIdx":1,"setId":1,"iconIdx":32},{"icon":{"paths":["M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["clear","close"],"grid":24},"attrs":[],"properties":{"order":19,"ligatures":"clear, close","id":153,"prevSize":24,"code":59659,"name":"clear"},"setIdx":1,"setId":1,"iconIdx":33},{"icon":{"paths":["M884 300l-78 78-160-160 78-78q12-12 30-12t30 12l100 100q12 12 12 30t-12 30zM128 736l472-472 160 160-472 472h-160v-160z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["create","mode_edit","edit"],"grid":24},"attrs":[],"properties":{"order":17,"ligatures":"create, mode_edit, edit","id":157,"prevSize":24,"code":59658,"name":"create"},"setIdx":1,"setId":1,"iconIdx":34},{"icon":{"paths":["M810 640v-426h-598v426h172q0 52 38 90t90 38 90-38 38-90h170zM810 128q36 0 61 25t25 61v596q0 34-26 60t-60 26h-598q-36 0-60-25t-24-61v-596q0-36 24-61t60-25h598z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["inbox"],"grid":24},"attrs":[],"properties":{"order":32,"ligatures":"inbox","id":163,"prevSize":24,"code":59672,"name":"inbox"},"setIdx":1,"setId":1,"iconIdx":35},{"icon":{"paths":["M512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125zM298 470h428v84h-428v-84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["remove_circle_outline"],"grid":24},"attrs":[],"properties":{"order":12,"ligatures":"remove_circle_outline","id":168,"prevSize":24,"code":59651,"name":"remove_circle_outline"},"setIdx":1,"setId":1,"iconIdx":36},{"icon":{"paths":["M86 896v-298l640-86-640-86v-298l896 384z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["send"],"grid":24},"attrs":[],"properties":{"order":31,"ligatures":"send","id":174,"prevSize":24,"code":59670,"name":"send"},"setIdx":1,"setId":1,"iconIdx":37},{"icon":{"paths":["M598 512h234l-234-234v234zM640 214l256 256v426q0 34-26 60t-60 26h-470q-34 0-59-26t-25-60v-598q0-34 26-59t60-25h298zM682 42v86h-512v598h-84v-598q0-34 25-60t59-26h512z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["file_copy"],"grid":24},"attrs":[],"properties":{"order":35,"ligatures":"file_copy","id":190,"prevSize":24,"code":59673,"name":"file_copy"},"setIdx":1,"setId":1,"iconIdx":38},{"icon":{"paths":["M300 574l252-252 54 54-308 306-162-162 54-54zM810 42q34 0 60 26t26 60v768q0 34-26 60t-60 26h-426q-34 0-60-26t-26-60v-128h86v86h426v-684h-426v86h-86v-128q0-34 26-60t60-26h426z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["mobile_friendly"],"grid":24},"attrs":[],"properties":{"order":25,"ligatures":"mobile_friendly","id":247,"prevSize":24,"code":59666,"name":"mobile, mobilepush"},"setIdx":1,"setId":1,"iconIdx":39},{"icon":{"paths":["M214 598l298-300 298 300h-170v256h-256v-256h-170zM214 170h596v86h-596v-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["publish"],"grid":24},"attrs":[],"properties":{"order":30,"ligatures":"publish","id":294,"prevSize":24,"code":59671,"name":"publish"},"setIdx":1,"setId":1,"iconIdx":40},{"icon":{"paths":["M214 726h596l-192-256-148 192-108-128zM896 128q32 0 59 27t27 59v596q0 32-27 59t-59 27h-768q-34 0-60-26t-26-60v-596q0-32 27-59t59-27h768z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["photo_size_select_actual"],"grid":24},"attrs":[],"properties":{"order":34,"ligatures":"photo_size_select_actual","id":506,"prevSize":24,"code":59674,"name":"photo_size_select_actual"},"setIdx":1,"setId":1,"iconIdx":41},{"icon":{"paths":["M754 270l100-100v300h-300l138-138q-76-76-180-76-106 0-181 75t-75 181 75 181 181 75q74 0 145-50t97-120h88q-28 112-120 184t-210 72q-140 0-240-100t-100-242 100-242 240-100q60 0 131 29t111 71z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["refresh"],"grid":24},"attrs":[],"properties":{"order":21,"ligatures":"refresh","id":603,"prevSize":24,"code":59662,"name":"refresh"},"setIdx":1,"setId":1,"iconIdx":42},{"icon":{"paths":["M512 598q108 0 225 47t117 123v86h-684v-86q0-76 117-123t225-47zM512 512q-70 0-120-50t-50-120 50-121 120-51 120 51 50 121-50 120-120 50z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["person"],"grid":24},"attrs":[],"properties":{"order":9,"ligatures":"person","id":685,"prevSize":24,"code":59652,"name":"person"},"setIdx":1,"setId":1,"iconIdx":43},{"icon":{"paths":["M640 598q108 0 225 47t117 123v86h-684v-86q0-76 117-123t225-47zM256 426h128v86h-128v128h-86v-128h-128v-86h128v-128h86v128zM640 512q-70 0-120-50t-50-120 50-121 120-51 120 51 50 121-50 120-120 50z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["person_add"],"grid":24},"attrs":[],"properties":{"order":8,"ligatures":"person_add","id":686,"prevSize":24,"code":59653,"name":"person_add"},"setIdx":1,"setId":1,"iconIdx":44},{"icon":{"paths":["M554 128h342v256h-342v-256zM554 896v-426h342v426h-342zM128 896v-256h342v256h-342zM128 554v-426h342v426h-342z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["dashboard"],"grid":24},"attrs":[],"properties":{"order":22,"ligatures":"dashboard","id":736,"prevSize":24,"code":59663,"name":"dashboard"},"setIdx":1,"setId":1,"iconIdx":45},{"icon":{"paths":["M810 170v86h-596v-86h148l44-42h212l44 42h148zM256 810v-512h512v512q0 34-26 60t-60 26h-340q-34 0-60-26t-26-60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["delete"],"grid":24},"attrs":[],"properties":{"order":11,"ligatures":"delete","id":737,"prevSize":24,"code":59654,"name":"delete"},"setIdx":1,"setId":1,"iconIdx":46},{"icon":{"paths":["M512 490l170-170v-150h-340v150zM682 704l-170-170-170 170v150h340v-150zM256 86h512v256l-170 170 170 170v256h-512v-256l170-170-170-170v-256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["hourglass_empty"],"grid":24},"attrs":[],"properties":{"order":28,"ligatures":"hourglass_empty","id":757,"prevSize":24,"code":59669,"name":"hourglass_empty"},"setIdx":1,"setId":1,"iconIdx":47},{"icon":{"paths":["M512 426l170 172h-128v256h-84v-256h-128zM810 170q36 0 61 25t25 61v512q0 34-26 60t-60 26h-170v-86h170v-426h-596v426h170v86h-170q-36 0-61-25t-25-61v-512q0-36 25-61t61-25h596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["open_in_browser"],"grid":24},"attrs":[],"properties":{"order":26,"ligatures":"open_in_browser","id":774,"prevSize":24,"code":59667,"name":"browser, webpush"},"setIdx":1,"setId":1,"iconIdx":48},{"icon":{"paths":["M406 598q80 0 136-56t56-136-56-136-136-56-136 56-56 136 56 136 136 56zM662 598l212 212-64 64-212-212v-34l-12-12q-76 66-180 66-116 0-197-80t-81-196 81-197 197-81 196 81 80 197q0 42-20 95t-46 85l12 12h34z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["search"],"grid":24},"attrs":[],"properties":{"order":18,"ligatures":"search","id":789,"prevSize":24,"code":59660,"name":"search"},"setIdx":1,"setId":1,"iconIdx":49},{"icon":{"paths":["M512 662q62 0 106-44t44-106-44-106-106-44-106 44-44 106 44 106 106 44zM830 554l90 70q14 10 4 28l-86 148q-8 14-26 8l-106-42q-42 30-72 42l-16 112q-4 18-20 18h-172q-16 0-20-18l-16-112q-38-16-72-42l-106 42q-18 6-26-8l-86-148q-10-18 4-28l90-70q-2-14-2-42t2-42l-90-70q-14-10-4-28l86-148q8-14 26-8l106 42q42-30 72-42l16-112q4-18 20-18h172q16 0 20 18l16 112q38 16 72 42l106-42q18-6 26 8l86 148q10 18-4 28l-90 70q2 14 2 42t-2 42z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["settings"],"grid":24},"attrs":[],"properties":{"order":23,"ligatures":"settings","id":790,"prevSize":24,"code":59664,"name":"settings"},"setIdx":1,"setId":1,"iconIdx":50},{"icon":{"paths":["M292.571 713.143v128c0 20-16.571 36.571-36.571 36.571h-146.286c-20 0-36.571-16.571-36.571-36.571v-128c0-20 16.571-36.571 36.571-36.571h146.286c20 0 36.571 16.571 36.571 36.571zM309.714 109.714l-16 438.857c-0.571 20-17.714 36.571-37.714 36.571h-146.286c-20 0-37.143-16.571-37.714-36.571l-16-438.857c-0.571-20 15.429-36.571 35.429-36.571h182.857c20 0 36 16.571 35.429 36.571z"],"attrs":[{}],"width":366,"isMulticolor":false,"isMulticolor2":false,"tags":["exclamation"],"grid":14},"attrs":[{}],"properties":{"order":1,"id":0,"name":"exclamation","prevSize":28,"code":59691},"setIdx":1,"setId":1,"iconIdx":51},{"icon":{"paths":["M446.293 810.667c-62.293 88.32-183.893 110.507-271.787 49.067-87.467-61.44-107.947-183.893-46.507-273.067 37.12-53.333 94.293-81.92 152.747-84.48l2.133 61.013c-38.827 2.987-76.373 23.040-100.693 58.027-42.667 61.44-29.44 144.213 29.013 185.6 58.88 40.96 141.227 25.173 183.893-35.84 13.227-19.2 20.907-40.107 23.893-61.44v-43.093l238.080-1.707 2.987-4.693c22.613-39.253 71.68-52.907 110.080-30.72s51.627 71.68 29.013 110.933c-22.613 38.827-72.107 52.48-110.507 30.293-17.493-9.813-29.867-25.6-35.413-43.52l-173.653 0.853c-4.693 28.587-15.787 56.32-33.28 82.773zM756.907 506.027c107.947 13.227 184.747 110.080 171.52 216.32-13.227 106.667-111.36 182.187-219.307 168.96-63.573-7.68-116.053-43.947-146.347-94.293l52.907-30.72c20.907 32.853 56.32 56.32 98.987 61.867 74.667 8.96 140.8-41.813 149.76-113.067s-43.947-136.533-117.76-145.493c-23.040-2.56-45.227 0.427-65.28 7.68l-36.267 18.773-110.080-203.52h-9.387c-45.227-1.707-80.213-38.827-78.933-83.2s39.68-78.933 84.48-77.227c44.8 2.56 80.213 38.827 78.933 83.2-0.853 18.773-8.107 35.84-19.627 49.067l81.067 149.76c26.453-8.533 55.467-11.52 85.333-8.107zM352 389.973c-42.667-100.267 2.56-215.040 101.12-256.853 98.987-41.813 213.333 5.547 256 105.813 25.173 58.453 20.053 122.453-8.533 173.653l-52.907-30.72c17.92-34.56 20.907-76.8 3.84-116.48-29.013-68.267-106.24-101.12-172.373-73.387-66.56 28.16-96.427 106.667-67.413 174.933 11.947 28.16 32 49.92 56.32 64.427l16.64 8.96-130.987 212.907c1.28 2.133 2.987 4.693 4.267 8.107 20.907 38.827 6.4 87.893-32.853 108.8-38.827 20.907-87.893 5.547-109.227-34.56-20.907-39.68-6.4-88.747 32.853-109.653 16.64-8.96 34.987-11.093 52.48-7.253l98.56-160.853c-20.053-18.347-37.12-41.387-47.787-67.84z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":14,"tags":["webhook_icon_138018"]},"attrs":[{}],"properties":{"order":41,"id":995,"name":"webhook","prevSize":28,"code":59690},"setIdx":1,"setId":1,"iconIdx":52},{"icon":{"paths":["M365.714 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM585.143 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM804.571 512c0 40.571-32.571 73.143-73.143 73.143s-73.143-32.571-73.143-73.143 32.571-73.143 73.143-73.143 73.143 32.571 73.143 73.143zM512 219.429c-237.714 0-438.857 133.714-438.857 292.571 0 85.143 57.143 166.286 156 222.286l49.714 28.571-15.429 54.857c-10.857 40.571-25.143 72-40 98.286 57.714-24 110.286-56.571 157.143-97.714l24.571-21.714 32.571 3.429c24.571 2.857 49.714 4.571 74.286 4.571 237.714 0 438.857-133.714 438.857-292.571s-201.143-292.571-438.857-292.571zM1024 512c0 202.286-229.143 365.714-512 365.714-28 0-56-1.714-82.857-4.571-74.857 66.286-164 113.143-262.857 138.286-20.571 5.714-42.857 9.714-65.143 12.571h-2.857c-11.429 0-21.714-9.143-24.571-21.714v-0.571c-2.857-14.286 6.857-22.857 15.429-33.143 36-40.571 77.143-74.857 104-170.286-117.714-66.857-193.143-170.286-193.143-286.286 0-201.714 229.143-365.714 512-365.714v0c282.857 0 512 164 512 365.714z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["commenting-o"],"grid":14},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":28,"code":59684,"name":"messaging"},"setIdx":1,"setId":1,"iconIdx":53},{"icon":{"paths":["M204.8 614.4c-56.554 0-102.4-45.846-102.4-102.4s45.846-102.4 102.4-102.4v0c56.554 0 102.4 45.846 102.4 102.4s-45.846 102.4-102.4 102.4v0zM512 614.4c-56.554 0-102.4-45.846-102.4-102.4s45.846-102.4 102.4-102.4v0c56.554 0 102.4 45.846 102.4 102.4s-45.846 102.4-102.4 102.4v0zM819.2 614.4c-56.554 0-102.4-45.846-102.4-102.4s45.846-102.4 102.4-102.4v0c56.554 0 102.4 45.846 102.4 102.4s-45.846 102.4-102.4 102.4v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["navigation-more"],"grid":20},"attrs":[{}],"properties":{"order":1,"id":0,"name":"more","prevSize":20,"code":59676},"setIdx":1,"setId":1,"iconIdx":54},{"icon":{"paths":["M512 1024c-136.76 0-265.334-53.258-362.040-149.96-96.702-96.706-149.96-225.28-149.96-362.040 0-96.838 27.182-191.134 78.606-272.692 50-79.296 120.664-143.372 204.356-185.3l43 85.832c-68.038 34.084-125.492 86.186-166.15 150.67-41.746 66.208-63.812 142.798-63.812 221.49 0 229.382 186.618 416 416 416s416-186.618 416-416c0-78.692-22.066-155.282-63.81-221.49-40.66-64.484-98.114-116.584-166.15-150.67l43-85.832c83.692 41.928 154.358 106.004 204.356 185.3 51.422 81.558 78.604 175.854 78.604 272.692 0 136.76-53.258 265.334-149.96 362.040-96.706 96.702-225.28 149.96-362.040 149.96z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["spinner","loading","loading-wheel","busy","wait"],"grid":16},"attrs":[{}],"properties":{"order":1,"id":0,"prevSize":16,"code":59655,"name":"spinner"},"setIdx":1,"setId":1,"iconIdx":55}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"name":"icomoon","classSelector":".icon"},"historySize":50}}
\ No newline at end of file
diff --git a/frontend/src/app/style/icons/style.css b/frontend/src/app/style/icons/style.css
index 9e55718d..1a0aaaf7 100644
--- a/frontend/src/app/style/icons/style.css
+++ b/frontend/src/app/style/icons/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?nb44dm');
-  src:  url('fonts/icomoon.eot?nb44dm#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?nb44dm') format('truetype'),
-    url('fonts/icomoon.woff?nb44dm') format('woff'),
-    url('fonts/icomoon.svg?nb44dm#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?lu39pk');
+  src:  url('fonts/icomoon.eot?lu39pk#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?lu39pk') format('truetype'),
+    url('fonts/icomoon.woff?lu39pk') format('woff'),
+    url('fonts/icomoon.svg?lu39pk#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-help-circle:before {
+  content: "\e938";
+}
 .icon-insert_emoticon:before {
   content: "\e937";
 }
diff --git a/frontend/src/app/texts/en.ts b/frontend/src/app/texts/en.ts
index f5ad7a5d..cf0b0e60 100644
--- a/frontend/src/app/texts/en.ts
+++ b/frontend/src/app/texts/en.ts
@@ -152,6 +152,7 @@ export const EN = {
         profile: 'Profile',
         profileSettings: 'Your Settings',
         propability: 'Propability',
+        properties: 'Properties',
         property: 'Property',
         publish: 'Publish',
         refresh: 'Refresh',
diff --git a/frontend/src/app/texts/index.ts b/frontend/src/app/texts/index.ts
index db715d27..214c7036 100644
--- a/frontend/src/app/texts/index.ts
+++ b/frontend/src/app/texts/index.ts
@@ -5,6 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
  */
 
+import { Types } from '@app/framework';
 import { EN } from './en';
 import { TR } from './tr';
 
@@ -19,4 +20,12 @@ if (userLanguage) {
     userLanguage = userLanguage.substring(0, 2);
 }
 
-export const texts = userLanguage.startsWith('tr') ? TR : EN;
+let result = EN;
+
+if (userLanguage.startsWith('tr')) {
+    result = {} as any;
+    Types.mergeInto(result, EN);
+    Types.mergeInto(result, TR);
+}
+
+export const texts = result;
diff --git a/frontend/src/app/texts/tr.ts b/frontend/src/app/texts/tr.ts
index 25fc8546..70158e04 100644
--- a/frontend/src/app/texts/tr.ts
+++ b/frontend/src/app/texts/tr.ts
@@ -153,6 +153,7 @@ export const TR = {
         profile: 'Profil',
         profileSettings: 'Ayarlarınız',
         propability: 'Olasılık',
+        properties: 'Properties',
         property: 'Özellik',
         publish: 'Yayımla',
         refresh: 'Yenile',
@@ -321,29 +322,29 @@ export const TR = {
             utc: 'UTC',
         },
         settingsInfo: 'Bildirim ayarları aşağıdaki sırayla birleştirilecektir:\n\n1. Kullanıcı ayarları.\n2. Konu ayarları tarafından geçersiz kılınmıştır.\n3. Bildirim ayarları tarafından geçersiz kılınmıştır.',
-    sms: {
-        name: 'SMS',
-        send: 'SMS olarak gönder',
-        title: 'SMS',
-    },
-    templateHints: 'Bu kanal için şablonu seçin. Burada yalnızca bir adı olan şablonlar görüntülenecektir. Eğer bir şablon tanımlanmamışsa birincil şablon kullanılır.',
-    web: {
-        name: 'Web',
-        send: 'Web Sayfası Üzerinden Gönder',
-        title: 'Web',
-    },
-    webhook: {
-        name: 'Webhook',
-        send: 'Başka bir Sunucuya Gönder',
-        title: 'Webhook',
-    },
-    webhookHints: 'Bu kanal için webhook entegrasyonunu seçin. Burada yalnızca bir adı olan webhooklar görüntülenecektir. Eğer bir webhook tanımlanmamışsa tüm webhooklar kullanılır.',
-    webpush: {
-        name: 'Web Push',
-        send: 'Web Push Olarak Gönder',
-        title: 'Web Push',
+        sms: {
+            name: 'SMS',
+            send: 'SMS olarak gönder',
+            title: 'SMS',
+        },
+        templateHints: 'Bu kanal için şablonu seçin. Burada yalnızca bir adı olan şablonlar görüntülenecektir. Eğer bir şablon tanımlanmamışsa birincil şablon kullanılır.',
+        web: {
+            name: 'Web',
+            send: 'Web Sayfası Üzerinden Gönder',
+            title: 'Web',
+        },
+        webhook: {
+            name: 'Webhook',
+            send: 'Başka bir Sunucuya Gönder',
+            title: 'Webhook',
+        },
+        webhookHints: 'Bu kanal için webhook entegrasyonunu seçin. Burada yalnızca bir adı olan webhooklar görüntülenecektir. Eğer bir webhook tanımlanmamışsa tüm webhooklar kullanılır.',
+        webpush: {
+            name: 'Web Push',
+            send: 'Web Push Olarak Gönder',
+            title: 'Web Push',
+        },
     },
-},
     notifications: {
         header: 'Bildirimler',
         notificationsNotFound: 'Eşleşen bildirim bulunamadı',
diff --git a/frontend/src/sdk/ui/components/Loader.tsx b/frontend/src/sdk/ui/components/Loader.tsx
index fed802af..6b751c0f 100644
--- a/frontend/src/sdk/ui/components/Loader.tsx
+++ b/frontend/src/sdk/ui/components/Loader.tsx
@@ -36,7 +36,9 @@ export const Loader = (props: LoaderProps) => {
                 setIsVisible(false);
             }, 300);
 
-            return () => clearTimeout(timeout);
+            return () => {
+                clearTimeout(timeout);
+            };
         }
     }, [visible]);
 
diff --git a/tools/sdk/Notifo.SDK/Generated.cs b/tools/sdk/Notifo.SDK/Generated.cs
index c0725d5a..2054f466 100644
--- a/tools/sdk/Notifo.SDK/Generated.cs
+++ b/tools/sdk/Notifo.SDK/Generated.cs
@@ -9134,6 +9134,15 @@ public partial interface IEmailTemplatesClient
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         System.Threading.Tasks.Task<ChannelTemplateDetailsDtoOfEmailTemplateDto> PostTemplateAsync(string appId, CreateChannelTemplateDto request, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
 
+        /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
+        /// <summary>
+        /// Get the template properties.
+        /// </summary>
+        /// <param name="appId">The id of the app where the templates belong to.</param>
+        /// <returns>Channel templates returned.</returns>
+        /// <exception cref="NotifoException">A server side error occurred.</exception>
+        System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
+
         /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
         /// <summary>
         /// Get the channel template by id.
@@ -9753,6 +9762,103 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
             }
         }
 
+        /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
+        /// <summary>
+        /// Get the template properties.
+        /// </summary>
+        /// <param name="appId">The id of the app where the templates belong to.</param>
+        /// <returns>Channel templates returned.</returns>
+        /// <exception cref="NotifoException">A server side error occurred.</exception>
+        public virtual async System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken))
+        {
+            if (appId == null)
+                throw new System.ArgumentNullException("appId");
+
+            var client_ = _httpClientProvider.Get();
+    #pragma warning disable CS0219 // Variable is assigned but its value is never used
+            var disposeClient_ =  false;
+    #pragma warning restore CS0219 // Variable is assigned but its value is never used
+            try
+            {
+                using (var request_ = new System.Net.Http.HttpRequestMessage())
+                {
+                    request_.Method = new System.Net.Http.HttpMethod("GET");
+                    request_.Headers.Accept.Add(System.Net.Http.Headers.MediaTypeWithQualityHeaderValue.Parse("application/json"));
+
+                    var urlBuilder_ = new System.Text.StringBuilder();
+                
+                    // Operation Path: "api/apps/{appId}/email-templates/properties"
+                    urlBuilder_.Append("api/apps/");
+                    urlBuilder_.Append(System.Uri.EscapeDataString(ConvertToString(appId, System.Globalization.CultureInfo.InvariantCulture)));
+                    urlBuilder_.Append("/email-templates/properties");
+
+                    PrepareRequest(client_, request_, urlBuilder_);
+
+                    var url_ = urlBuilder_.ToString();
+                    request_.RequestUri = new System.Uri(url_, System.UriKind.RelativeOrAbsolute);
+
+                    PrepareRequest(client_, request_, url_);
+
+                    var response_ = await client_.SendAsync(request_, System.Net.Http.HttpCompletionOption.ResponseHeadersRead, cancellationToken).ConfigureAwait(false);
+                    var disposeResponse_ = true;
+                    try
+                    {
+                        var headers_ = new System.Collections.Generic.Dictionary<string, System.Collections.Generic.IEnumerable<string>>();
+                        foreach (var item_ in response_.Headers)
+                            headers_[item_.Key] = item_.Value;
+                        if (response_.Content != null && response_.Content.Headers != null)
+                        {
+                            foreach (var item_ in response_.Content.Headers)
+                                headers_[item_.Key] = item_.Value;
+                        }
+
+                        ProcessResponse(client_, response_);
+
+                        var status_ = (int)response_.StatusCode;
+                        if (status_ == 200 || status_ == 201)
+                        {
+                            var objectResponse_ = await ReadObjectResponseAsync<ListResponseDtoOfTemplatePropertyDto>(response_, headers_, cancellationToken).ConfigureAwait(false);
+                            if (objectResponse_.Object == null)
+                            {
+                                throw new NotifoException("Response was null which was not expected.", status_, objectResponse_.Text, headers_, null);
+                            }
+                            return objectResponse_.Object;
+                        }
+                        else
+                        if (status_ == 404)
+                        {
+                            string responseText_ = ( response_.Content == null ) ? string.Empty : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
+                            throw new NotifoException("Channel template or app not found.", status_, responseText_, headers_, null);
+                        }
+                        else
+                        if (status_ == 500)
+                        {
+                            var objectResponse_ = await ReadObjectResponseAsync<ErrorDto>(response_, headers_, cancellationToken).ConfigureAwait(false);
+                            if (objectResponse_.Object == null)
+                            {
+                                throw new NotifoException("Response was null which was not expected.", status_, objectResponse_.Text, headers_, null);
+                            }
+                            throw new NotifoException<ErrorDto>("Operation failed.", status_, objectResponse_.Text, headers_, objectResponse_.Object, null);
+                        }
+                        else
+                        {
+                            var responseData_ = response_.Content == null ? null : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
+                            throw new NotifoException("The HTTP status code of the response was not expected (" + status_ + ").", status_, responseData_, headers_, null);
+                        }
+                    }
+                    finally
+                    {
+                        if (disposeResponse_)
+                            response_.Dispose();
+                    }
+                }
+            }
+            finally
+            {
+                _httpClientProvider.Return(client_);
+            }
+        }
+
         /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
         /// <summary>
         /// Get the channel template by id.
@@ -10580,6 +10686,15 @@ public partial interface IMessagingTemplatesClient
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         System.Threading.Tasks.Task<ChannelTemplateDetailsDtoOfMessagingTemplateDto> PostTemplateAsync(string appId, CreateChannelTemplateDto request, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
 
+        /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
+        /// <summary>
+        /// Get the template properties.
+        /// </summary>
+        /// <param name="appId">The id of the app where the templates belong to.</param>
+        /// <returns>Channel templates returned.</returns>
+        /// <exception cref="NotifoException">A server side error occurred.</exception>
+        System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
+
         /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
         /// <summary>
         /// Get the channel template by id.
@@ -10899,6 +11014,103 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
             }
         }
 
+        /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
+        /// <summary>
+        /// Get the template properties.
+        /// </summary>
+        /// <param name="appId">The id of the app where the templates belong to.</param>
+        /// <returns>Channel templates returned.</returns>
+        /// <exception cref="NotifoException">A server side error occurred.</exception>
+        public virtual async System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken))
+        {
+            if (appId == null)
+                throw new System.ArgumentNullException("appId");
+
+            var client_ = _httpClientProvider.Get();
+    #pragma warning disable CS0219 // Variable is assigned but its value is never used
+            var disposeClient_ =  false;
+    #pragma warning restore CS0219 // Variable is assigned but its value is never used
+            try
+            {
+                using (var request_ = new System.Net.Http.HttpRequestMessage())
+                {
+                    request_.Method = new System.Net.Http.HttpMethod("GET");
+                    request_.Headers.Accept.Add(System.Net.Http.Headers.MediaTypeWithQualityHeaderValue.Parse("application/json"));
+
+                    var urlBuilder_ = new System.Text.StringBuilder();
+                
+                    // Operation Path: "api/apps/{appId}/messaging-templates/properties"
+                    urlBuilder_.Append("api/apps/");
+                    urlBuilder_.Append(System.Uri.EscapeDataString(ConvertToString(appId, System.Globalization.CultureInfo.InvariantCulture)));
+                    urlBuilder_.Append("/messaging-templates/properties");
+
+                    PrepareRequest(client_, request_, urlBuilder_);
+
+                    var url_ = urlBuilder_.ToString();
+                    request_.RequestUri = new System.Uri(url_, System.UriKind.RelativeOrAbsolute);
+
+                    PrepareRequest(client_, request_, url_);
+
+                    var response_ = await client_.SendAsync(request_, System.Net.Http.HttpCompletionOption.ResponseHeadersRead, cancellationToken).ConfigureAwait(false);
+                    var disposeResponse_ = true;
+                    try
+                    {
+                        var headers_ = new System.Collections.Generic.Dictionary<string, System.Collections.Generic.IEnumerable<string>>();
+                        foreach (var item_ in response_.Headers)
+                            headers_[item_.Key] = item_.Value;
+                        if (response_.Content != null && response_.Content.Headers != null)
+                        {
+                            foreach (var item_ in response_.Content.Headers)
+                                headers_[item_.Key] = item_.Value;
+                        }
+
+                        ProcessResponse(client_, response_);
+
+                        var status_ = (int)response_.StatusCode;
+                        if (status_ == 200 || status_ == 201)
+                        {
+                            var objectResponse_ = await ReadObjectResponseAsync<ListResponseDtoOfTemplatePropertyDto>(response_, headers_, cancellationToken).ConfigureAwait(false);
+                            if (objectResponse_.Object == null)
+                            {
+                                throw new NotifoException("Response was null which was not expected.", status_, objectResponse_.Text, headers_, null);
+                            }
+                            return objectResponse_.Object;
+                        }
+                        else
+                        if (status_ == 404)
+                        {
+                            string responseText_ = ( response_.Content == null ) ? string.Empty : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
+                            throw new NotifoException("Channel template or app not found.", status_, responseText_, headers_, null);
+                        }
+                        else
+                        if (status_ == 500)
+                        {
+                            var objectResponse_ = await ReadObjectResponseAsync<ErrorDto>(response_, headers_, cancellationToken).ConfigureAwait(false);
+                            if (objectResponse_.Object == null)
+                            {
+                                throw new NotifoException("Response was null which was not expected.", status_, objectResponse_.Text, headers_, null);
+                            }
+                            throw new NotifoException<ErrorDto>("Operation failed.", status_, objectResponse_.Text, headers_, objectResponse_.Object, null);
+                        }
+                        else
+                        {
+                            var responseData_ = response_.Content == null ? null : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
+                            throw new NotifoException("The HTTP status code of the response was not expected (" + status_ + ").", status_, responseData_, headers_, null);
+                        }
+                    }
+                    finally
+                    {
+                        if (disposeResponse_)
+                            response_.Dispose();
+                    }
+                }
+            }
+            finally
+            {
+                _httpClientProvider.Return(client_);
+            }
+        }
+
         /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
         /// <summary>
         /// Get the channel template by id.
@@ -11726,6 +11938,15 @@ public partial interface ISmsTemplatesClient
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         System.Threading.Tasks.Task<ChannelTemplateDetailsDtoOfSmsTemplateDto> PostTemplateAsync(string appId, CreateChannelTemplateDto request, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
 
+        /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
+        /// <summary>
+        /// Get the template properties.
+        /// </summary>
+        /// <param name="appId">The id of the app where the templates belong to.</param>
+        /// <returns>Channel templates returned.</returns>
+        /// <exception cref="NotifoException">A server side error occurred.</exception>
+        System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
+
         /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
         /// <summary>
         /// Get the channel template by id.
@@ -12045,6 +12266,103 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
             }
         }
 
+        /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
+        /// <summary>
+        /// Get the template properties.
+        /// </summary>
+        /// <param name="appId">The id of the app where the templates belong to.</param>
+        /// <returns>Channel templates returned.</returns>
+        /// <exception cref="NotifoException">A server side error occurred.</exception>
+        public virtual async System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken))
+        {
+            if (appId == null)
+                throw new System.ArgumentNullException("appId");
+
+            var client_ = _httpClientProvider.Get();
+    #pragma warning disable CS0219 // Variable is assigned but its value is never used
+            var disposeClient_ =  false;
+    #pragma warning restore CS0219 // Variable is assigned but its value is never used
+            try
+            {
+                using (var request_ = new System.Net.Http.HttpRequestMessage())
+                {
+                    request_.Method = new System.Net.Http.HttpMethod("GET");
+                    request_.Headers.Accept.Add(System.Net.Http.Headers.MediaTypeWithQualityHeaderValue.Parse("application/json"));
+
+                    var urlBuilder_ = new System.Text.StringBuilder();
+                
+                    // Operation Path: "api/apps/{appId}/sms-templates/properties"
+                    urlBuilder_.Append("api/apps/");
+                    urlBuilder_.Append(System.Uri.EscapeDataString(ConvertToString(appId, System.Globalization.CultureInfo.InvariantCulture)));
+                    urlBuilder_.Append("/sms-templates/properties");
+
+                    PrepareRequest(client_, request_, urlBuilder_);
+
+                    var url_ = urlBuilder_.ToString();
+                    request_.RequestUri = new System.Uri(url_, System.UriKind.RelativeOrAbsolute);
+
+                    PrepareRequest(client_, request_, url_);
+
+                    var response_ = await client_.SendAsync(request_, System.Net.Http.HttpCompletionOption.ResponseHeadersRead, cancellationToken).ConfigureAwait(false);
+                    var disposeResponse_ = true;
+                    try
+                    {
+                        var headers_ = new System.Collections.Generic.Dictionary<string, System.Collections.Generic.IEnumerable<string>>();
+                        foreach (var item_ in response_.Headers)
+                            headers_[item_.Key] = item_.Value;
+                        if (response_.Content != null && response_.Content.Headers != null)
+                        {
+                            foreach (var item_ in response_.Content.Headers)
+                                headers_[item_.Key] = item_.Value;
+                        }
+
+                        ProcessResponse(client_, response_);
+
+                        var status_ = (int)response_.StatusCode;
+                        if (status_ == 200 || status_ == 201)
+                        {
+                            var objectResponse_ = await ReadObjectResponseAsync<ListResponseDtoOfTemplatePropertyDto>(response_, headers_, cancellationToken).ConfigureAwait(false);
+                            if (objectResponse_.Object == null)
+                            {
+                                throw new NotifoException("Response was null which was not expected.", status_, objectResponse_.Text, headers_, null);
+                            }
+                            return objectResponse_.Object;
+                        }
+                        else
+                        if (status_ == 404)
+                        {
+                            string responseText_ = ( response_.Content == null ) ? string.Empty : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
+                            throw new NotifoException("Channel template or app not found.", status_, responseText_, headers_, null);
+                        }
+                        else
+                        if (status_ == 500)
+                        {
+                            var objectResponse_ = await ReadObjectResponseAsync<ErrorDto>(response_, headers_, cancellationToken).ConfigureAwait(false);
+                            if (objectResponse_.Object == null)
+                            {
+                                throw new NotifoException("Response was null which was not expected.", status_, objectResponse_.Text, headers_, null);
+                            }
+                            throw new NotifoException<ErrorDto>("Operation failed.", status_, objectResponse_.Text, headers_, objectResponse_.Object, null);
+                        }
+                        else
+                        {
+                            var responseData_ = response_.Content == null ? null : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
+                            throw new NotifoException("The HTTP status code of the response was not expected (" + status_ + ").", status_, responseData_, headers_, null);
+                        }
+                    }
+                    finally
+                    {
+                        if (disposeResponse_)
+                            response_.Dispose();
+                    }
+                }
+            }
+            finally
+            {
+                _httpClientProvider.Return(client_);
+            }
+        }
+
         /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
         /// <summary>
         /// Get the channel template by id.
@@ -15373,9 +15691,8 @@ public partial class UpdateSystemUserDto
         /// <summary>
         /// Additional role for the user.
         /// </summary>
-        [Newtonsoft.Json.JsonProperty("roles", Required = Newtonsoft.Json.Required.DisallowNull, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
-        [System.ComponentModel.DataAnnotations.Required]
-        public System.Collections.Generic.List<string> Roles { get; set; } = new System.Collections.Generic.List<string>();
+        [Newtonsoft.Json.JsonProperty("roles", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
+        public System.Collections.Generic.List<string> Roles { get; set; }
 
     }
 
@@ -16456,6 +16773,71 @@ public partial class ChannelTemplateDto
 
     }
 
+    [System.CodeDom.Compiler.GeneratedCode("NJsonSchema", "14.0.3.0 (NJsonSchema v11.0.0.0 (Newtonsoft.Json v13.0.0.0))")]
+    public partial class ListResponseDtoOfTemplatePropertyDto
+    {
+        /// <summary>
+        /// The items.
+        /// </summary>
+        [Newtonsoft.Json.JsonProperty("items", Required = Newtonsoft.Json.Required.DisallowNull, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
+        [System.ComponentModel.DataAnnotations.Required]
+        public System.Collections.Generic.List<TemplatePropertyDto> Items { get; set; } = new System.Collections.Generic.List<TemplatePropertyDto>();
+
+        /// <summary>
+        /// The total number of items.
+        /// </summary>
+        [Newtonsoft.Json.JsonProperty("total", Required = Newtonsoft.Json.Required.DisallowNull, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
+        public long Total { get; set; }
+
+    }
+
+    [System.CodeDom.Compiler.GeneratedCode("NJsonSchema", "14.0.3.0 (NJsonSchema v11.0.0.0 (Newtonsoft.Json v13.0.0.0))")]
+    public partial class TemplatePropertyDto
+    {
+        /// <summary>
+        /// The property path.
+        /// </summary>
+        [Newtonsoft.Json.JsonProperty("path", Required = Newtonsoft.Json.Required.DisallowNull, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
+        [System.ComponentModel.DataAnnotations.Required(AllowEmptyStrings = true)]
+        public string Path { get; set; }
+
+        /// <summary>
+        /// The data ty.
+        /// </summary>
+        [Newtonsoft.Json.JsonProperty("type", Required = Newtonsoft.Json.Required.DisallowNull, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
+        [System.ComponentModel.DataAnnotations.Required(AllowEmptyStrings = true)]
+        [Newtonsoft.Json.JsonConverter(typeof(Newtonsoft.Json.Converters.StringEnumConverter))]
+        public LiquidPropertyType Type { get; set; }
+
+        /// <summary>
+        /// The optional description.
+        /// </summary>
+        [Newtonsoft.Json.JsonProperty("description", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
+        public string Description { get; set; }
+
+    }
+
+    [System.CodeDom.Compiler.GeneratedCode("NJsonSchema", "14.0.3.0 (NJsonSchema v11.0.0.0 (Newtonsoft.Json v13.0.0.0))")]
+    public enum LiquidPropertyType
+    {
+
+        [System.Runtime.Serialization.EnumMember(Value = @"Array")]
+        Array = 0,
+
+        [System.Runtime.Serialization.EnumMember(Value = @"String")]
+        String = 1,
+
+        [System.Runtime.Serialization.EnumMember(Value = @"Number")]
+        Number = 2,
+
+        [System.Runtime.Serialization.EnumMember(Value = @"Boolean")]
+        Boolean = 3,
+
+        [System.Runtime.Serialization.EnumMember(Value = @"Object")]
+        Object = 4,
+
+    }
+
     [System.CodeDom.Compiler.GeneratedCode("NJsonSchema", "14.0.3.0 (NJsonSchema v11.0.0.0 (Newtonsoft.Json v13.0.0.0))")]
     public partial class ChannelTemplateDetailsDtoOfEmailTemplateDto
     {

From cf6f9e37f7afcbac4677fbfb7236851ed294dbdf Mon Sep 17 00:00:00 2001
From: alibildir <84903907+alibildir@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:03:17 +0300
Subject: [PATCH 2/3] translate ot tr new word, import resolution changed
 because script order was incorrect (#232)

---
 frontend/src/app/texts/index.ts | 2 +-
 frontend/src/app/texts/tr.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/texts/index.ts b/frontend/src/app/texts/index.ts
index 214c7036..e510922d 100644
--- a/frontend/src/app/texts/index.ts
+++ b/frontend/src/app/texts/index.ts
@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
  */
 
-import { Types } from '@app/framework';
+import { Types } from '@app/framework/utils/types';
 import { EN } from './en';
 import { TR } from './tr';
 
diff --git a/frontend/src/app/texts/tr.ts b/frontend/src/app/texts/tr.ts
index 70158e04..2b7b3481 100644
--- a/frontend/src/app/texts/tr.ts
+++ b/frontend/src/app/texts/tr.ts
@@ -153,7 +153,7 @@ export const TR = {
         profile: 'Profil',
         profileSettings: 'Ayarlarınız',
         propability: 'Olasılık',
-        properties: 'Properties',
+        properties: 'Özellikler',
         property: 'Özellik',
         publish: 'Yayımla',
         refresh: 'Yenile',

From c0f58f787571e558d242d6b38e868e6070c49966 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Thu, 11 Apr 2024 19:05:17 +0200
Subject: [PATCH 3/3] Frontend fixes (#233)

* Temp

* Fixes editors.

* Reuse hooks.

* Simplify code.

* Simplify code.
---
 frontend/src/app/framework/react/hooks.ts     |  10 +-
 .../email-templates/EmailTemplatePage.tsx     |   6 +-
 .../editor/EmailHtmlEditor.tsx                |  85 +++--
 .../editor/EmailHtmlTextEditor.tsx            |  91 -----
 .../editor/EmailTextEditor.tsx                |  19 +-
 .../pages/email-templates/editor/helpers.ts   |  31 +-
 .../MessagingTemplatePage.tsx                 |   6 +-
 .../pages/sms-templates/SmsTemplatePage.tsx   |   4 +-
 frontend/src/app/service/service.ts           | 312 ++++++++++++------
 frontend/src/app/texts/tr.ts                  |   2 +-
 tools/sdk/CodeGenerator/Program.cs            |   3 +-
 tools/sdk/Notifo.SDK/Generated.cs             |  18 +-
 12 files changed, 332 insertions(+), 255 deletions(-)
 delete mode 100644 frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx

diff --git a/frontend/src/app/framework/react/hooks.ts b/frontend/src/app/framework/react/hooks.ts
index 6e6bb348..e5f293ed 100644
--- a/frontend/src/app/framework/react/hooks.ts
+++ b/frontend/src/app/framework/react/hooks.ts
@@ -154,7 +154,7 @@ type QueryState<T> = {
 
 type QueryParams<T> = {
     queryKey: string[];
-    queryFn: (abort: AbortController) => Promise<T>;
+    queryFn: (abort: AbortSignal) => Promise<T>;
     defaultValue: T;
 };
 
@@ -168,7 +168,7 @@ export function useSimpleQuery<T>(params: QueryParams<T>): QueryState<T> {
 
             setState(s => ({ ...s, isLoading: true }));
             try {
-                const value = await params.queryFn(abort);
+                const value = await params.queryFn(abort.signal);
     
                 if (request.current === id) {
                     setState(s => ({ ...s, error: undefined, value }));
@@ -184,11 +184,11 @@ export function useSimpleQuery<T>(params: QueryParams<T>): QueryState<T> {
             }
         }
 
-        const abort = new AbortController();
-        loadData(new Date().getTime(), abort);
+        const controller = new AbortController();
+        loadData(new Date().getTime(), controller);
 
         return () => {
-            abort.abort();
+            controller.abort();
         };
     }, params.queryKey);
 
diff --git a/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx b/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx
index 8f88db35..7696c5b9 100644
--- a/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx
+++ b/frontend/src/app/pages/email-templates/EmailTemplatePage.tsx
@@ -37,9 +37,9 @@ export const EmailTemplatePage = () => {
     const [language, setLanguage] = React.useState(appLanguages[0]);
 
     const properties = useSimpleQuery<TemplatePropertyDto[]>({
-        queryKey: [],
-        queryFn: async () => {
-            const result = await Clients.SmsTemplates.getProperties(appId);
+        queryKey: [appId],
+        queryFn: async abort => {
+            const result = await Clients.SmsTemplates.getProperties(appId, abort);
             
             return result.items;
         },
diff --git a/frontend/src/app/pages/email-templates/editor/EmailHtmlEditor.tsx b/frontend/src/app/pages/email-templates/editor/EmailHtmlEditor.tsx
index f71bdd14..3564f3ad 100644
--- a/frontend/src/app/pages/email-templates/editor/EmailHtmlEditor.tsx
+++ b/frontend/src/app/pages/email-templates/editor/EmailHtmlEditor.tsx
@@ -5,57 +5,90 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
  */
 
-// tslint:disable: quotemark
-
+import * as React from 'react';
 import Split from 'react-split';
 import { Alert } from 'reactstrap';
-import { IFrame } from '@app/framework';
+import { CodeEditor, CodeEditorProps, IFrame } from '@app/framework';
 import { MjmlSchema } from '@app/service';
-import { EmailHtmlTextEditor } from './EmailHtmlTextEditor';
-import { usePreview } from './helpers';
-
-export interface EmailHtmlEditorProps {
-    // The value.
-    value: string;
+import { useErrors, usePreview } from './helpers';
+import { completeAfter, completeIfAfterLt, completeIfInTag } from './helpers';
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/edit/closetag';
+import 'codemirror/addon/edit/matchtags';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/xml-hint';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/scroll/annotatescrollbar';
+import 'codemirror/addon/search/jump-to-line';
+import 'codemirror/addon/search/match-highlighter';
+import 'codemirror/addon/search/matchesonscrollbar';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/addon/selection/active-line';
+import 'codemirror/mode/xml/xml';
 
+export interface EmailHtmlEditorProps extends CodeEditorProps {
     // The app name.
     appId: string;
 
     // The schema.
     schema?: MjmlSchema;
-
-    // When the html has changed.
-    onChange: (value: string) => void;
-
-    // Called when the focus has been lost.
-    onBlur: () => void;
 }
 
 export const EmailHtmlEditor = (props: EmailHtmlEditorProps) => {
     const {
         appId,
-        onBlur,
-        onChange,
         schema,
         value,
+        ...other
     } = props;
 
     const emailMarkup = value || '';
     const emailPreview = usePreview(appId, emailMarkup, 'Html');
 
-    const error = emailPreview.rendering.errors?.[0];
+    const initialOptions = React.useMemo(() => {
+        const result: CodeEditorProps['options'] = {
+            autoCloseTags: true,
+            mode: 'xml',
+            extraKeys: {
+                Tab: (cm) => {
+                    if (cm.getMode().name === 'null') {
+                        cm.execCommand('insertTab');
+                    } else if (cm.somethingSelected()) {
+                        cm.execCommand('indentMore');
+                    } else {
+                        cm.execCommand('insertSoftTab');
+                    }
+                },
+                '\'<\'': completeAfter,
+                '\'/\'': completeIfAfterLt,
+                '\' \'': completeIfInTag,
+                '\'=\'': completeIfInTag,
+                'Ctrl-Space': 'autocomplete',
+            },
+            matchTags: true,
+        };
+
+        return result;
+    }, []);
+
+    const { lint, error } = useErrors(emailPreview.rendering);
+
+    const options = React.useMemo(() => {
+        const result: CodeEditorProps['options'] = {
+            hintOptions: schema ? { schemaInfo: schema } : undefined,
+            lint,
+        };
+
+        return result;
+    }, [lint, schema]);
 
     return (
-        <div className='email-editor'>
+        <div className='email-editor white'>
             <Split direction='horizontal'>
                 <div className='left'>
-                    <EmailHtmlTextEditor
-                        value={emailMarkup}
-                        errors={emailPreview.rendering?.errors}
-                        onBlur={onBlur}
-                        onChange={onChange}
-                        schema={schema}
-                    />
+                    <CodeEditor initialOptions={initialOptions} options={options} value={emailMarkup}
+                        className='email-editor' {...other} />
                 </div>
 
                 <div className='right'>
diff --git a/frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx b/frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx
deleted file mode 100644
index 503fb169..00000000
--- a/frontend/src/app/pages/email-templates/editor/EmailHtmlTextEditor.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Notifo.io
- *
- * @license
- * Copyright (c) Sebastian Stehle. All rights reserved.
- */
-
-// tslint:disable: quotemark
-
-import * as CodeMirror from 'codemirror';
-import * as React from 'react';
-import { CodeEditor, CodeEditorProps } from '@app/framework';
-import { EmailPreviewErrorDto, MjmlSchema } from '@app/service';
-import { completeAfter, completeIfAfterLt, completeIfInTag } from './helpers';
-import 'codemirror/addon/dialog/dialog';
-import 'codemirror/addon/edit/closetag';
-import 'codemirror/addon/edit/matchtags';
-import 'codemirror/addon/hint/show-hint';
-import 'codemirror/addon/hint/xml-hint';
-import 'codemirror/addon/lint/lint';
-import 'codemirror/addon/scroll/annotatescrollbar';
-import 'codemirror/addon/search/jump-to-line';
-import 'codemirror/addon/search/match-highlighter';
-import 'codemirror/addon/search/matchesonscrollbar';
-import 'codemirror/addon/search/search';
-import 'codemirror/addon/search/searchcursor';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/mode/xml/xml';
-
-export interface EmailHtmlTextEditorProps extends CodeEditorProps {
-    // The template errors.
-    errors?: EmailPreviewErrorDto[];
-
-    // The email schema.
-    schema?: MjmlSchema;
-}
-
-export const EmailHtmlTextEditor = (props: EmailHtmlTextEditorProps) => {
-    const { errors, schema, ...other } = props;
-
-    const initialOptions = React.useMemo(() => {
-        const result: CodeEditorProps['options'] = {
-            autoCloseTags: true,
-            mode: 'xml',
-            extraKeys: {
-                Tab: (cm) => {
-                    if (cm.getMode().name === 'null') {
-                        cm.execCommand('insertTab');
-                    } else if (cm.somethingSelected()) {
-                        cm.execCommand('indentMore');
-                    } else {
-                        cm.execCommand('insertSoftTab');
-                    }
-                },
-                '\'<\'': completeAfter,
-                '\'/\'': completeIfAfterLt,
-                '\' \'': completeIfInTag,
-                '\'=\'': completeIfInTag,
-                'Ctrl-Space': 'autocomplete',
-            },
-            matchTags: true,
-        };
-
-        return result;
-    }, []);
-
-    const options = React.useMemo(() => {
-        const result: CodeEditorProps['options'] = {
-            hintOptions: schema ? { schemaInfo: schema } : undefined,
-            lint: {
-                getAnnotations: () => {
-                    if (!errors) {
-                        return [];
-                    }
-    
-                    return errors.map(({ message, lineNumber }) => {
-                        const from = CodeMirror.Pos(lineNumber! - 1, 1);
-    
-                        return { message, severity: 'error', from, to: from };
-                    });
-                },
-            },
-        };
-
-        return result;
-    }, [errors, schema]);
-
-    return (
-        <CodeEditor initialOptions={initialOptions} options={options} className='email-editor' {...other} />
-    );
-};
\ No newline at end of file
diff --git a/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx b/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx
index fd80935b..02e44a87 100644
--- a/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx
+++ b/frontend/src/app/pages/email-templates/editor/EmailTextEditor.tsx
@@ -5,10 +5,11 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
  */
 
+import * as React from 'react';
 import Split from 'react-split';
 import { Alert } from 'reactstrap';
 import { CodeEditor, CodeEditorProps } from '@app/framework';
-import { usePreview } from './helpers';
+import { useErrors, usePreview } from './helpers';
 import 'codemirror/mode/django/django';
 
 export interface EmailTextEditorProps extends CodeEditorProps {
@@ -16,7 +17,7 @@ export interface EmailTextEditorProps extends CodeEditorProps {
     appId: string;
 }
 
-const OPTIONS = {
+const INITIAL_OPTIONS = {
     mode: 'django',
 };
 
@@ -30,14 +31,22 @@ export const EmailTextEditor = (props: EmailTextEditorProps) => {
     const emailMarkup = value || '';
     const emailPreview = usePreview(appId, emailMarkup, 'Text');
 
-    const error = emailPreview.rendering.errors?.find(x => !x.lineNumber || x.lineNumber < 0);
+    const { lint, error } = useErrors(emailPreview.rendering);
+
+    const options = React.useMemo(() => {
+        const result: CodeEditorProps['options'] = {
+            lint,
+        };
+
+        return result;
+    }, [lint]);
 
     return (
         <div className='email-editor white'>
             <Split direction='horizontal'>
                 <div className='left'>
-                    <CodeEditor value={value} {...other}
-                        initialOptions={OPTIONS} />
+                    <CodeEditor initialOptions={INITIAL_OPTIONS} options={options} value={emailMarkup}
+                        className='email-editor' {...other} />
                 </div>
 
                 <div className='right'>
diff --git a/frontend/src/app/pages/email-templates/editor/helpers.ts b/frontend/src/app/pages/email-templates/editor/helpers.ts
index 8cd5fb7b..0c6985fb 100644
--- a/frontend/src/app/pages/email-templates/editor/helpers.ts
+++ b/frontend/src/app/pages/email-templates/editor/helpers.ts
@@ -8,6 +8,7 @@
 /* eslint-disable quote-props */
 
 import * as CodeMirror from 'codemirror';
+import * as React from 'react';
 import { useDebounce, useSimpleQuery } from '@app/framework';
 import { Clients, EmailPreviewDto, EmailPreviewType } from '@app/service';
 
@@ -19,14 +20,14 @@ export function usePreview(appId: string, sourceTemplate: string, type: EmailPre
     const template = useDebounce(sourceTemplate, 500);
 
     const query = useSimpleQuery<MarkupResponse>({
-        queryKey: [template, type],
-        queryFn: async () => {
+        queryKey: [appId, template, type],
+        queryFn: async abort => {
             if (!template) {
                 return { rendering: {} };
             }
 
             try {
-                const rendering = await Clients.EmailTemplates.postPreview(appId, { template, type });
+                const rendering = await Clients.EmailTemplates.postPreview(appId, { template, type }, abort);
 
                 return { rendering, template };
             } catch (ex: any) {
@@ -45,6 +46,30 @@ export function usePreview(appId: string, sourceTemplate: string, type: EmailPre
     return query.value;
 }
 
+export function useErrors(rendering?: EmailPreviewDto) {
+    const errors = rendering?.errors;
+    
+    return React.useMemo(() => {
+        const error = errors?.find(x => !x.lineNumber || x.lineNumber < 0);
+
+        const lint = {
+            getAnnotations: () => {
+                if (!errors) {
+                    return [];
+                }
+
+                return errors.filter(x => x.lineNumber >= 0).map(({ message, lineNumber }) => {
+                    const from = CodeMirror.Pos(lineNumber! - 1, 1);
+
+                    return { message, severity: 'error', from, to: from };
+                });
+            },
+        };
+
+        return { error, lint };
+    }, [errors]);
+}
+
 export function completeAfter(editor: CodeMirror.Editor, predicate?: (cursor: CodeMirror.Position) => boolean) {
     const cursor = editor.getCursor();
 
diff --git a/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx b/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx
index 74ac247d..8607466e 100644
--- a/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx
+++ b/frontend/src/app/pages/messaging-templates/MessagingTemplatePage.tsx
@@ -39,9 +39,9 @@ export const MessagingTemplatePage = () => {
     const [language, setLanguage] = React.useState(appLanguages[0]);
 
     const properties = useSimpleQuery<TemplatePropertyDto[]>({
-        queryKey: [],
-        queryFn: async () => {
-            const result = await Clients.MessagingTemplates.getProperties(appId);
+        queryKey: [appId],
+        queryFn: async abort => {
+            const result = await Clients.MessagingTemplates.getProperties(appId, abort);
             
             return result.items;
         },
diff --git a/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx b/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx
index ffd340a5..faa7bee6 100644
--- a/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx
+++ b/frontend/src/app/pages/sms-templates/SmsTemplatePage.tsx
@@ -39,9 +39,9 @@ export const SmsTemplatePage = () => {
     const [language, setLanguage] = React.useState(appLanguages[0]);
 
     const properties = useSimpleQuery<TemplatePropertyDto[]>({
-        queryKey: [],
+        queryKey: [appId],
         queryFn: async () => {
-            const result = await Clients.SmsTemplates.getProperties(appId);
+            const result = await Clients.SmsTemplates.getProperties(appId, abort);
             
             return result.items;
         },
diff --git a/frontend/src/app/service/service.ts b/frontend/src/app/service/service.ts
index 7473e4d8..a51f0b96 100644
--- a/frontend/src/app/service/service.ts
+++ b/frontend/src/app/service/service.ts
@@ -22,12 +22,13 @@ export class UserClient {
      * Get the current user.
      * @return User returned.
      */
-    getUser(): Promise<ProfileDto> {
+    getUser(signal?: AbortSignal): Promise<ProfileDto> {
         let url_ = this.baseUrl + "/api/me";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -66,7 +67,7 @@ export class UserClient {
      * @param request The upsert request.
      * @return Users upserted.
      */
-    postUser(request: UpdateProfileDto): Promise<ProfileDto> {
+    postUser(request: UpdateProfileDto, signal?: AbortSignal): Promise<ProfileDto> {
         let url_ = this.baseUrl + "/api/me";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -75,6 +76,7 @@ export class UserClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -119,12 +121,13 @@ export class UserClient {
      * Get the current admin user.
      * @return User returned.
      */
-    getAdminUser(): Promise<AdminProfileDto> {
+    getAdminUser(signal?: AbortSignal): Promise<AdminProfileDto> {
         let url_ = this.baseUrl + "/api/me/admin";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -163,7 +166,7 @@ export class UserClient {
      * @param language (optional) The optional language.
      * @return User subscriptions returned.
      */
-    getTopics(language?: string | null | undefined): Promise<UserTopicDto[]> {
+    getTopics(language?: string | null | undefined, signal?: AbortSignal): Promise<UserTopicDto[]> {
         let url_ = this.baseUrl + "/api/me/topics?";
         if (language !== undefined && language !== null)
             url_ += "language=" + encodeURIComponent("" + language) + "&";
@@ -171,6 +174,7 @@ export class UserClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -212,7 +216,7 @@ export class UserClient {
      * @param skip (optional) The number of items to skip.
      * @return User subscriptions returned.
      */
-    getMySubscriptions(topics?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfSubscriptionDto> {
+    getMySubscriptions(topics?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfSubscriptionDto> {
         let url_ = this.baseUrl + "/api/me/subscriptions?";
         if (topics !== undefined && topics !== null)
             url_ += "Topics=" + encodeURIComponent("" + topics) + "&";
@@ -230,6 +234,7 @@ export class UserClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -268,7 +273,7 @@ export class UserClient {
      * @param request The subscription settings.
      * @return User subscribed.
      */
-    postMySubscriptions(request: SubscribeManyDto): Promise<void> {
+    postMySubscriptions(request: SubscribeManyDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/me/subscriptions";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -277,6 +282,7 @@ export class UserClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -319,7 +325,7 @@ export class UserClient {
      * @param topic The topic path.
      * @return Subscription exists.
      */
-    getMySubscription(topic: string): Promise<SubscriptionDto> {
+    getMySubscription(topic: string, signal?: AbortSignal): Promise<SubscriptionDto> {
         let url_ = this.baseUrl + "/api/me/subscriptions/{topic}";
         if (topic === undefined || topic === null)
             throw new Error("The parameter 'topic' must be defined.");
@@ -328,6 +334,7 @@ export class UserClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -370,7 +377,7 @@ export class UserClient {
      * @param prefix The topic prefix.
      * @return User unsubscribed.
      */
-    deleteSubscription(prefix: string): Promise<void> {
+    deleteSubscription(prefix: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/me/subscriptions/{prefix}";
         if (prefix === undefined || prefix === null)
             throw new Error("The parameter 'prefix' must be defined.");
@@ -379,6 +386,7 @@ export class UserClient {
 
         let options_: RequestInit = {
             method: "POST",
+            signal,
             headers: {
             }
         };
@@ -435,7 +443,7 @@ export class UsersClient {
      * @param withDetails (optional) Provide extra details, might be expensive.
      * @return Users returned.
      */
-    getUsers(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, withDetails?: boolean | undefined): Promise<ListResponseDtoOfUserDto> {
+    getUsers(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, withDetails?: boolean | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfUserDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -458,6 +466,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -501,7 +510,7 @@ export class UsersClient {
      * @param request The upsert request.
      * @return Users upserted.
      */
-    postUsers(appId: string, request: UpsertUsersDto): Promise<UserDto[]> {
+    postUsers(appId: string, request: UpsertUsersDto, signal?: AbortSignal): Promise<UserDto[]> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -513,6 +522,7 @@ export class UsersClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -564,7 +574,7 @@ export class UsersClient {
      * @param withDetails (optional) Provide extra details, might be expensive.
      * @return User returned.
      */
-    getUser(appId: string, id: string, withDetails?: boolean | undefined): Promise<UserDto> {
+    getUser(appId: string, id: string, withDetails?: boolean | undefined, signal?: AbortSignal): Promise<UserDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -580,6 +590,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -623,7 +634,7 @@ export class UsersClient {
      * @param id The user id to delete.
      * @return User deleted.
      */
-    deleteUser(appId: string, id: string): Promise<void> {
+    deleteUser(appId: string, id: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -635,6 +646,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -684,7 +696,7 @@ export class UsersClient {
      * @param skip (optional) The number of items to skip.
      * @return User subscriptions returned.
      */
-    getSubscriptions(appId: string, id: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfSubscriptionDto> {
+    getSubscriptions(appId: string, id: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfSubscriptionDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/subscriptions?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -706,6 +718,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -750,7 +763,7 @@ export class UsersClient {
      * @param request The subscription object.
      * @return User subscribed.
      */
-    postSubscriptions(appId: string, id: string, request: SubscribeManyDto): Promise<void> {
+    postSubscriptions(appId: string, id: string, request: SubscribeManyDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/subscriptions";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -765,6 +778,7 @@ export class UsersClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -813,7 +827,7 @@ export class UsersClient {
      * @param prefix The topic prefix.
      * @return User unsubscribed.
      */
-    deleteSubscription(appId: string, id: string, prefix: string): Promise<void> {
+    deleteSubscription(appId: string, id: string, prefix: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/subscriptions/{prefix}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -828,6 +842,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -875,7 +890,7 @@ export class UsersClient {
      * @param request The upsert request.
      * @return User updated.
      */
-    postAllowedTopic(appId: string, id: string, request: AddAllowedTopicDto): Promise<void> {
+    postAllowedTopic(appId: string, id: string, request: AddAllowedTopicDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/allowed-topics";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -890,6 +905,7 @@ export class UsersClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -938,7 +954,7 @@ export class UsersClient {
      * @param prefix The topic prefix.
      * @return User updated.
      */
-    deleteAllowedTopic(appId: string, id: string, prefix: string): Promise<void> {
+    deleteAllowedTopic(appId: string, id: string, prefix: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/allowed-topics/{prefix}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -953,6 +969,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -1000,7 +1017,7 @@ export class UsersClient {
      * @param token The token.
      * @return User updated.
      */
-    deleteMobilePushToken(appId: string, id: string, token: string): Promise<void> {
+    deleteMobilePushToken(appId: string, id: string, token: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/mobilepush/{token}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1015,6 +1032,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -1062,7 +1080,7 @@ export class UsersClient {
      * @param endpoint The endpoint.
      * @return User updated.
      */
-    deleteWebPushSubscription(appId: string, id: string, endpoint: string): Promise<void> {
+    deleteWebPushSubscription(appId: string, id: string, endpoint: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/webpush/{endpoint}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1077,6 +1095,7 @@ export class UsersClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -1137,7 +1156,7 @@ export class TopicsClient {
      * @param skip (optional) The number of items to skip.
      * @return Topics returned.
      */
-    getTopics(appId: string, scope?: TopicQueryScope | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfTopicDto> {
+    getTopics(appId: string, scope?: TopicQueryScope | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfTopicDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/topics?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1160,6 +1179,7 @@ export class TopicsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -1203,7 +1223,7 @@ export class TopicsClient {
      * @param request The upsert request.
      * @return Named topics upserted.
      */
-    postTopics(appId: string, request: UpsertTopicsDto): Promise<TopicDto[]> {
+    postTopics(appId: string, request: UpsertTopicsDto, signal?: AbortSignal): Promise<TopicDto[]> {
         let url_ = this.baseUrl + "/api/apps/{appId}/topics";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1215,6 +1235,7 @@ export class TopicsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -1261,7 +1282,7 @@ export class TopicsClient {
      * @param path The path of the topic to delete.
      * @return Topic deleted.
      */
-    deleteTopic(appId: string, path: string): Promise<void> {
+    deleteTopic(appId: string, path: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/topics/{path}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1273,6 +1294,7 @@ export class TopicsClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -1328,7 +1350,7 @@ export class TemplatesClient {
      * @param skip (optional) The number of items to skip.
      * @return Templates returned.
      */
-    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfTemplateDto> {
+    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/templates?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1347,6 +1369,7 @@ export class TemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -1386,7 +1409,7 @@ export class TemplatesClient {
      * @param request The upsert request.
      * @return Templates upserted.
      */
-    postTemplates(appId: string, request: UpsertTemplatesDto): Promise<TemplateDto[]> {
+    postTemplates(appId: string, request: UpsertTemplatesDto, signal?: AbortSignal): Promise<TemplateDto[]> {
         let url_ = this.baseUrl + "/api/apps/{appId}/templates";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1398,6 +1421,7 @@ export class TemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -1444,7 +1468,7 @@ export class TemplatesClient {
      * @param code The template code to delete.
      * @return Template deleted.
      */
-    deleteTemplate(appId: string, code: string): Promise<void> {
+    deleteTemplate(appId: string, code: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -1456,6 +1480,7 @@ export class TemplatesClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -1510,7 +1535,7 @@ export class SystemUsersClient {
      * @param skip (optional) The number of items to skip.
      * @return Users returned.
      */
-    getUsers(query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfSystemUserDto> {
+    getUsers(query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfSystemUserDto> {
         let url_ = this.baseUrl + "/api/system-users?";
         if (query !== undefined && query !== null)
             url_ += "query=" + encodeURIComponent("" + query) + "&";
@@ -1526,6 +1551,7 @@ export class SystemUsersClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -1564,7 +1590,7 @@ export class SystemUsersClient {
      * @param request The create request.
      * @return User created.
      */
-    postUser(request: CreateSystemUserDto): Promise<SystemUserDto> {
+    postUser(request: CreateSystemUserDto, signal?: AbortSignal): Promise<SystemUserDto> {
         let url_ = this.baseUrl + "/api/system-users";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -1573,6 +1599,7 @@ export class SystemUsersClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -1618,7 +1645,7 @@ export class SystemUsersClient {
      * @param id The user ID.
      * @return User returned.
      */
-    getUser(id: string): Promise<SystemUserDto> {
+    getUser(id: string, signal?: AbortSignal): Promise<SystemUserDto> {
         let url_ = this.baseUrl + "/api/system-users/{id}";
         if (id === undefined || id === null)
             throw new Error("The parameter 'id' must be defined.");
@@ -1627,6 +1654,7 @@ export class SystemUsersClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -1670,7 +1698,7 @@ export class SystemUsersClient {
      * @param request The update request.
      * @return User updated.
      */
-    putUser(id: string, request: UpdateSystemUserDto): Promise<SystemUserDto> {
+    putUser(id: string, request: UpdateSystemUserDto, signal?: AbortSignal): Promise<SystemUserDto> {
         let url_ = this.baseUrl + "/api/system-users/{id}";
         if (id === undefined || id === null)
             throw new Error("The parameter 'id' must be defined.");
@@ -1682,6 +1710,7 @@ export class SystemUsersClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -1733,7 +1762,7 @@ export class SystemUsersClient {
      * @param id The user ID.
      * @return User deleted.
      */
-    deleteUser(id: string): Promise<void> {
+    deleteUser(id: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/system-users/{id}";
         if (id === undefined || id === null)
             throw new Error("The parameter 'id' must be defined.");
@@ -1742,6 +1771,7 @@ export class SystemUsersClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -1789,7 +1819,7 @@ export class SystemUsersClient {
      * @param id The user ID.
      * @return User locked.
      */
-    lockUser(id: string): Promise<SystemUserDto> {
+    lockUser(id: string, signal?: AbortSignal): Promise<SystemUserDto> {
         let url_ = this.baseUrl + "/api/system-users/{id}/lock";
         if (id === undefined || id === null)
             throw new Error("The parameter 'id' must be defined.");
@@ -1798,6 +1828,7 @@ export class SystemUsersClient {
 
         let options_: RequestInit = {
             method: "PUT",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -1848,7 +1879,7 @@ export class SystemUsersClient {
      * @param id The user ID.
      * @return User unlocked.
      */
-    unlockUser(id: string): Promise<SystemUserDto> {
+    unlockUser(id: string, signal?: AbortSignal): Promise<SystemUserDto> {
         let url_ = this.baseUrl + "/api/system-users/{id}/unlock";
         if (id === undefined || id === null)
             throw new Error("The parameter 'id' must be defined.");
@@ -1857,6 +1888,7 @@ export class SystemUsersClient {
 
         let options_: RequestInit = {
             method: "PUT",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -1918,12 +1950,13 @@ export class PingClient {
      * @return Service ping successful.
      * @deprecated
      */
-    getOldPing(): Promise<void> {
+    getOldPing(signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/ping";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
             }
         };
@@ -1958,12 +1991,13 @@ export class PingClient {
      * Get ping status of the API.
      * @return Service ping successful.
      */
-    getPing(): Promise<void> {
+    getPing(signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/ping";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
             }
         };
@@ -1997,12 +2031,13 @@ export class PingClient {
     /**
      * Get some info about the API.
      */
-    getInfo(): Promise<InfoDto> {
+    getInfo(signal?: AbortSignal): Promise<InfoDto> {
         let url_ = this.baseUrl + "/api/info";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2058,7 +2093,7 @@ export class NotificationsClient {
      * @param skip (optional) The number of items to skip.
      * @return User notifications returned.
      */
-    getAllNotifications(appId: string, channels?: string[] | null | undefined, channel?: string | null | undefined, correlationId?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfUserNotificationDetailsDto> {
+    getAllNotifications(appId: string, channels?: string[] | null | undefined, channel?: string | null | undefined, correlationId?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfUserNotificationDetailsDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/notifications?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -2083,6 +2118,7 @@ export class NotificationsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2132,7 +2168,7 @@ export class NotificationsClient {
      * @param skip (optional) The number of items to skip.
      * @return User notifications returned.
      */
-    getNotifications(appId: string, id: string, channels?: string[] | null | undefined, channel?: string | null | undefined, correlationId?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfUserNotificationDetailsDto> {
+    getNotifications(appId: string, id: string, channels?: string[] | null | undefined, channel?: string | null | undefined, correlationId?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfUserNotificationDetailsDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/users/{id}/notifications?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -2160,6 +2196,7 @@ export class NotificationsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2207,7 +2244,7 @@ export class NotificationsClient {
      * @param skip (optional) The number of items to skip.
      * @return Notifications returned.
      */
-    getMyNotifications(channels?: string[] | null | undefined, channel?: string | null | undefined, correlationId?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfUserNotificationDto> {
+    getMyNotifications(channels?: string[] | null | undefined, channel?: string | null | undefined, correlationId?: string | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfUserNotificationDto> {
         let url_ = this.baseUrl + "/api/me/notifications?";
         if (channels !== undefined && channels !== null)
             channels && channels.forEach(item => { url_ += "Channels=" + encodeURIComponent("" + item) + "&"; });
@@ -2229,6 +2266,7 @@ export class NotificationsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2267,7 +2305,7 @@ export class NotificationsClient {
      * @param channel (optional) The tracking channel.
      * @return Notifications returned.
      */
-    getMyArchive(channel?: string | null | undefined): Promise<ListResponseDtoOfUserNotificationDto> {
+    getMyArchive(channel?: string | null | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfUserNotificationDto> {
         let url_ = this.baseUrl + "/api/me/notifications/archive?";
         if (channel !== undefined && channel !== null)
             url_ += "channel=" + encodeURIComponent("" + channel) + "&";
@@ -2275,6 +2313,7 @@ export class NotificationsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2316,7 +2355,7 @@ export class NotificationsClient {
      * @param take (optional) The number of notifications to query.
      * @return Notifications returned.
      */
-    getMyDeviceNotifications(deviceIdentifier?: string | null | undefined, after?: string | undefined, scope?: DeviceNotificationsQueryScope | undefined, take?: number | undefined): Promise<ListResponseDtoOfUserNotificationDto> {
+    getMyDeviceNotifications(deviceIdentifier?: string | null | undefined, after?: string | undefined, scope?: DeviceNotificationsQueryScope | undefined, take?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfUserNotificationDto> {
         let url_ = this.baseUrl + "/api/me/notifications/device?";
         if (deviceIdentifier !== undefined && deviceIdentifier !== null)
             url_ += "DeviceIdentifier=" + encodeURIComponent("" + deviceIdentifier) + "&";
@@ -2336,6 +2375,7 @@ export class NotificationsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2374,7 +2414,7 @@ export class NotificationsClient {
      * @param request The request object.
      * @return Notifications updated.
      */
-    confirmMe(request: TrackNotificationDto): Promise<void> {
+    confirmMe(request: TrackNotificationDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/me/notifications/handled";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -2383,6 +2423,7 @@ export class NotificationsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -2435,12 +2476,13 @@ export class MobilePushClient {
      * Returns the mobile push tokens.
      * @return Mobile push tokens returned.
      */
-    getMyToken(): Promise<ListResponseDtoOfMobilePushTokenDto> {
+    getMyToken(signal?: AbortSignal): Promise<ListResponseDtoOfMobilePushTokenDto> {
         let url_ = this.baseUrl + "/api/me/mobilepush";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2479,7 +2521,7 @@ export class MobilePushClient {
      * @param request The request object.
      * @return Mobile push token registered.
      */
-    postMyToken(request: RegisterMobileTokenDto): Promise<void> {
+    postMyToken(request: RegisterMobileTokenDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/me/mobilepush";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -2488,6 +2530,7 @@ export class MobilePushClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -2530,7 +2573,7 @@ export class MobilePushClient {
      * @param token The token to remove.
      * @return Mobile push token removed.
      */
-    deleteMyToken(token: string): Promise<void> {
+    deleteMyToken(token: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/me/mobilepush/{token}";
         if (token === undefined || token === null)
             throw new Error("The parameter 'token' must be defined.");
@@ -2539,6 +2582,7 @@ export class MobilePushClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -2594,7 +2638,7 @@ export class MediaClient {
      * @param skip (optional) The number of items to skip.
      * @return Media returned.
      */
-    getMedias(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfMediaDto> {
+    getMedias(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfMediaDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/media?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -2613,6 +2657,7 @@ export class MediaClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -2656,7 +2701,7 @@ export class MediaClient {
      * @param file (optional) 
      * @return Media uploaded.
      */
-    upload(appId: string, file?: FileParameter | undefined): Promise<void> {
+    upload(appId: string, file?: FileParameter | undefined, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/media";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -2672,6 +2717,7 @@ export class MediaClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
             }
         };
@@ -2730,7 +2776,7 @@ export class MediaClient {
      * @param emptyOnFailure (optional) True, to return an empty image on failure.
      * @return Media returned.
      */
-    download(appId: string, fileName: string, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined): Promise<FileResponse> {
+    download(appId: string, fileName: string, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined, signal?: AbortSignal): Promise<FileResponse> {
         let url_ = this.baseUrl + "/api/apps/{appId}/media/{fileName}?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -2774,6 +2820,7 @@ export class MediaClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/octet-stream"
             }
@@ -2822,7 +2869,7 @@ export class MediaClient {
      * @param fileName The file name of the media.
      * @return Media deleted.
      */
-    delete(appId: string, fileName: string): Promise<void> {
+    delete(appId: string, fileName: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/media/{fileName}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -2834,6 +2881,7 @@ export class MediaClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -2892,7 +2940,7 @@ export class MediaClient {
      * @param emptyOnFailure (optional) True, to return an empty image on failure.
      * @return Media returned.
      */
-    download2(appId: string, fileName: string, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined): Promise<FileResponse> {
+    download2(appId: string, fileName: string, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined, signal?: AbortSignal): Promise<FileResponse> {
         let url_ = this.baseUrl + "/api/asset/{appId}/{fileName}?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -2936,6 +2984,7 @@ export class MediaClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/octet-stream"
             }
@@ -2996,7 +3045,7 @@ export class MediaClient {
      * @param emptyOnFailure (optional) True, to return an empty image on failure.
      * @return Media returned.
      */
-    download3(appId: string, fileName: string, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined): Promise<FileResponse> {
+    download3(appId: string, fileName: string, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined, signal?: AbortSignal): Promise<FileResponse> {
         let url_ = this.baseUrl + "/api/assets/{appId}/{fileName}?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3040,6 +3089,7 @@ export class MediaClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/octet-stream"
             }
@@ -3099,7 +3149,7 @@ export class MediaClient {
      * @param emptyOnFailure (optional) True, to return an empty image on failure.
      * @return Media returned.
      */
-    proxyImage(url?: string | undefined, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined): Promise<FileResponse> {
+    proxyImage(url?: string | undefined, cache?: number | undefined, download?: number | undefined, bg?: string | null | undefined, width?: number | null | undefined, height?: number | null | undefined, quality?: number | null | undefined, preset?: string | null | undefined, mode?: ResizeMode | null | undefined, focusX?: number | null | undefined, focusY?: number | null | undefined, force?: boolean | undefined, emptyOnFailure?: boolean | undefined, signal?: AbortSignal): Promise<FileResponse> {
         let url_ = this.baseUrl + "/api/assets/proxy?";
         if (url === null)
             throw new Error("The parameter 'url' cannot be null.");
@@ -3141,6 +3191,7 @@ export class MediaClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/octet-stream"
             }
@@ -3205,7 +3256,7 @@ export class LogsClient {
      * @param skip (optional) The number of items to skip.
      * @return Log entries returned.
      */
-    getLogs(appId: string, systems?: string[] | null | undefined, userId?: string | null | undefined, eventCode?: number | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfLogEntryDto> {
+    getLogs(appId: string, systems?: string[] | null | undefined, userId?: string | null | undefined, eventCode?: number | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfLogEntryDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/logs?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3232,6 +3283,7 @@ export class LogsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -3289,7 +3341,7 @@ export class EventsClient {
      * @param skip (optional) The number of items to skip.
      * @return Events returned.
      */
-    getEvents(appId: string, channels?: string[] | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfEventDto> {
+    getEvents(appId: string, channels?: string[] | null | undefined, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfEventDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/events?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3310,6 +3362,7 @@ export class EventsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -3353,7 +3406,7 @@ export class EventsClient {
      * @param request The publish request.
      * @return Events created.
      */
-    postEvents(appId: string, request: PublishManyDto): Promise<void> {
+    postEvents(appId: string, request: PublishManyDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/events";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3365,6 +3418,7 @@ export class EventsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -3411,7 +3465,7 @@ export class EventsClient {
      * @param appId The app where the events belongs to.
      * @param request The cancel request.
      */
-    cancelEvent(appId: string, request: CancelEventDto): Promise<CancelResponseDto> {
+    cancelEvent(appId: string, request: CancelEventDto, signal?: AbortSignal): Promise<CancelResponseDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/events";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3423,6 +3477,7 @@ export class EventsClient {
         let options_: RequestInit = {
             body: content_,
             method: "DELETE",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -3472,7 +3527,7 @@ export class EventsClient {
      * @param request The publish request.
      * @return Event created.
      */
-    postMyEvents(request: PublishDto): Promise<void> {
+    postMyEvents(request: PublishDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/me/events";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -3481,6 +3536,7 @@ export class EventsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -3537,12 +3593,13 @@ export class DiagnosticsClient {
      * Creates a dump and writes it into storage..
      * @return Dump created successful.
      */
-    getDump(): Promise<void> {
+    getDump(signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/diagnostics/dump";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
             }
         };
@@ -3583,12 +3640,13 @@ export class DiagnosticsClient {
      * Creates a gc dump and writes it into storage.
      * @return Dump created successful.
      */
-    getGCDump(): Promise<void> {
+    getGCDump(signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/diagnostics/gcdump";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
             }
         };
@@ -3640,12 +3698,13 @@ export class ConfigsClient {
      * Get all supported timezones.
      * @return Timezones returned.
      */
-    getTimezones(): Promise<string[]> {
+    getTimezones(signal?: AbortSignal): Promise<string[]> {
         let url_ = this.baseUrl + "/api/timezones";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -3683,12 +3742,13 @@ export class ConfigsClient {
      * Get all supported languages.
      * @return Languages returned.
      */
-    getLanguages(): Promise<string[]> {
+    getLanguages(signal?: AbortSignal): Promise<string[]> {
         let url_ = this.baseUrl + "/api/languages";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -3736,12 +3796,13 @@ export class EmailTemplatesClient {
     /**
      * Gets the mjml schema.
      */
-    getSchema(): Promise<MjmlSchema> {
+    getSchema(signal?: AbortSignal): Promise<MjmlSchema> {
         let url_ = this.baseUrl + "/api/mjml/schema";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -3781,7 +3842,7 @@ export class EmailTemplatesClient {
      * @param id The template ID.
      * @return Channel template preview returned.
      */
-    getPreview(appId: string, id: string): Promise<FileResponse> {
+    getPreview(appId: string, id: string, signal?: AbortSignal): Promise<FileResponse> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/{id}/preview";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3793,6 +3854,7 @@ export class EmailTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/octet-stream"
             }
@@ -3841,7 +3903,7 @@ export class EmailTemplatesClient {
      * @param request The template to render.
      * @return Template rendered.
      */
-    postPreview(appId: string, request: EmailPreviewRequestDto): Promise<EmailPreviewDto> {
+    postPreview(appId: string, request: EmailPreviewRequestDto, signal?: AbortSignal): Promise<EmailPreviewDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/render";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3853,6 +3915,7 @@ export class EmailTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -3905,7 +3968,7 @@ export class EmailTemplatesClient {
      * @param skip (optional) The number of items to skip.
      * @return Channel templates returned.
      */
-    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfChannelTemplateDto> {
+    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfChannelTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3924,6 +3987,7 @@ export class EmailTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -3967,7 +4031,7 @@ export class EmailTemplatesClient {
      * @param request The request object.
      * @return Channel template created.
      */
-    postTemplate(appId: string, request: CreateChannelTemplateDto): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
+    postTemplate(appId: string, request: CreateChannelTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -3979,6 +4043,7 @@ export class EmailTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4026,9 +4091,9 @@ export class EmailTemplatesClient {
     /**
      * Get the template properties.
      * @param appId The id of the app where the templates belong to.
-     * @return Channel templates returned.
+     * @return Channel templates properties returned.
      */
-    getProperties(appId: string): Promise<ListResponseDtoOfTemplatePropertyDto> {
+    getProperties(appId: string, signal?: AbortSignal): Promise<ListResponseDtoOfTemplatePropertyDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/properties";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4037,6 +4102,7 @@ export class EmailTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -4058,7 +4124,7 @@ export class EmailTemplatesClient {
             });
         } else if (status === 404) {
             return response.text().then((_responseText) => {
-            return throwException("Channel template or app not found.", status, _responseText, _headers);
+            return throwException("App not found.", status, _responseText, _headers);
             });
         } else if (status === 500) {
             return response.text().then((_responseText) => {
@@ -4080,7 +4146,7 @@ export class EmailTemplatesClient {
      * @param id The template ID.
      * @return Channel templates returned.
      */
-    getTemplate(appId: string, id: string): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
+    getTemplate(appId: string, id: string, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/{id}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4092,6 +4158,7 @@ export class EmailTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -4136,7 +4203,7 @@ export class EmailTemplatesClient {
      * @param request The request object.
      * @return Channel template created.
      */
-    postTemplateLanguage(appId: string, code: string, request: CreateChannelTemplateLanguageDto): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
+    postTemplateLanguage(appId: string, code: string, request: CreateChannelTemplateLanguageDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4151,6 +4218,7 @@ export class EmailTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4201,7 +4269,7 @@ export class EmailTemplatesClient {
      * @param code The template code.
      * @param request The request object.
      */
-    putTemplate(appId: string, code: string, request: UpdateChannelTemplateDtoOfEmailTemplateDto): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
+    putTemplate(appId: string, code: string, request: UpdateChannelTemplateDtoOfEmailTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4216,6 +4284,7 @@ export class EmailTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4266,7 +4335,7 @@ export class EmailTemplatesClient {
      * @param code The template ID.
      * @return Channel template deleted.
      */
-    deleteTemplate(appId: string, code: string): Promise<void> {
+    deleteTemplate(appId: string, code: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4278,6 +4347,7 @@ export class EmailTemplatesClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -4325,7 +4395,7 @@ export class EmailTemplatesClient {
      * @param language The language.
      * @param request The request object.
      */
-    putTemplateLanguage(appId: string, code: string, language: string, request: EmailTemplateDto): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
+    putTemplateLanguage(appId: string, code: string, language: string, request: EmailTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/{code}/{language}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4343,6 +4413,7 @@ export class EmailTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4393,7 +4464,7 @@ export class EmailTemplatesClient {
      * @param code The template ID.
      * @param language The language.
      */
-    deleteTemplateLanguage(appId: string, code: string, language: string): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
+    deleteTemplateLanguage(appId: string, code: string, language: string, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfEmailTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/email-templates/{code}/{language}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4408,6 +4479,7 @@ export class EmailTemplatesClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -4470,7 +4542,7 @@ export class MessagingTemplatesClient {
      * @param skip (optional) The number of items to skip.
      * @return Channel templates returned.
      */
-    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfChannelTemplateDto> {
+    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfChannelTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4489,6 +4561,7 @@ export class MessagingTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -4532,7 +4605,7 @@ export class MessagingTemplatesClient {
      * @param request The request object.
      * @return Channel template created.
      */
-    postTemplate(appId: string, request: CreateChannelTemplateDto): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
+    postTemplate(appId: string, request: CreateChannelTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4544,6 +4617,7 @@ export class MessagingTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4591,9 +4665,9 @@ export class MessagingTemplatesClient {
     /**
      * Get the template properties.
      * @param appId The id of the app where the templates belong to.
-     * @return Channel templates returned.
+     * @return Channel templates properties returned.
      */
-    getProperties(appId: string): Promise<ListResponseDtoOfTemplatePropertyDto> {
+    getProperties(appId: string, signal?: AbortSignal): Promise<ListResponseDtoOfTemplatePropertyDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/properties";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4602,6 +4676,7 @@ export class MessagingTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -4623,7 +4698,7 @@ export class MessagingTemplatesClient {
             });
         } else if (status === 404) {
             return response.text().then((_responseText) => {
-            return throwException("Channel template or app not found.", status, _responseText, _headers);
+            return throwException("App not found.", status, _responseText, _headers);
             });
         } else if (status === 500) {
             return response.text().then((_responseText) => {
@@ -4645,7 +4720,7 @@ export class MessagingTemplatesClient {
      * @param id The template ID.
      * @return Channel templates returned.
      */
-    getTemplate(appId: string, id: string): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
+    getTemplate(appId: string, id: string, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/{id}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4657,6 +4732,7 @@ export class MessagingTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -4701,7 +4777,7 @@ export class MessagingTemplatesClient {
      * @param request The request object.
      * @return Channel template created.
      */
-    postTemplateLanguage(appId: string, code: string, request: CreateChannelTemplateLanguageDto): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
+    postTemplateLanguage(appId: string, code: string, request: CreateChannelTemplateLanguageDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4716,6 +4792,7 @@ export class MessagingTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4766,7 +4843,7 @@ export class MessagingTemplatesClient {
      * @param code The template code.
      * @param request The request object.
      */
-    putTemplate(appId: string, code: string, request: UpdateChannelTemplateDtoOfMessagingTemplateDto): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
+    putTemplate(appId: string, code: string, request: UpdateChannelTemplateDtoOfMessagingTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4781,6 +4858,7 @@ export class MessagingTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4831,7 +4909,7 @@ export class MessagingTemplatesClient {
      * @param code The template ID.
      * @return Channel template deleted.
      */
-    deleteTemplate(appId: string, code: string): Promise<void> {
+    deleteTemplate(appId: string, code: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4843,6 +4921,7 @@ export class MessagingTemplatesClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -4890,7 +4969,7 @@ export class MessagingTemplatesClient {
      * @param language The language.
      * @param request The request object.
      */
-    putTemplateLanguage(appId: string, code: string, language: string, request: MessagingTemplateDto): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
+    putTemplateLanguage(appId: string, code: string, language: string, request: MessagingTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/{code}/{language}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4908,6 +4987,7 @@ export class MessagingTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -4958,7 +5038,7 @@ export class MessagingTemplatesClient {
      * @param code The template ID.
      * @param language The language.
      */
-    deleteTemplateLanguage(appId: string, code: string, language: string): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
+    deleteTemplateLanguage(appId: string, code: string, language: string, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfMessagingTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/messaging-templates/{code}/{language}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -4973,6 +5053,7 @@ export class MessagingTemplatesClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5035,7 +5116,7 @@ export class SmsTemplatesClient {
      * @param skip (optional) The number of items to skip.
      * @return Channel templates returned.
      */
-    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined): Promise<ListResponseDtoOfChannelTemplateDto> {
+    getTemplates(appId: string, query?: string | null | undefined, take?: number | undefined, skip?: number | undefined, signal?: AbortSignal): Promise<ListResponseDtoOfChannelTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates?";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5054,6 +5135,7 @@ export class SmsTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5097,7 +5179,7 @@ export class SmsTemplatesClient {
      * @param request The request object.
      * @return Channel template created.
      */
-    postTemplate(appId: string, request: CreateChannelTemplateDto): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
+    postTemplate(appId: string, request: CreateChannelTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5109,6 +5191,7 @@ export class SmsTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -5156,9 +5239,9 @@ export class SmsTemplatesClient {
     /**
      * Get the template properties.
      * @param appId The id of the app where the templates belong to.
-     * @return Channel templates returned.
+     * @return Channel templates properties returned.
      */
-    getProperties(appId: string): Promise<ListResponseDtoOfTemplatePropertyDto> {
+    getProperties(appId: string, signal?: AbortSignal): Promise<ListResponseDtoOfTemplatePropertyDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/properties";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5167,6 +5250,7 @@ export class SmsTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5188,7 +5272,7 @@ export class SmsTemplatesClient {
             });
         } else if (status === 404) {
             return response.text().then((_responseText) => {
-            return throwException("Channel template or app not found.", status, _responseText, _headers);
+            return throwException("App not found.", status, _responseText, _headers);
             });
         } else if (status === 500) {
             return response.text().then((_responseText) => {
@@ -5210,7 +5294,7 @@ export class SmsTemplatesClient {
      * @param id The template ID.
      * @return Channel templates returned.
      */
-    getTemplate(appId: string, id: string): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
+    getTemplate(appId: string, id: string, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/{id}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5222,6 +5306,7 @@ export class SmsTemplatesClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5266,7 +5351,7 @@ export class SmsTemplatesClient {
      * @param request The request object.
      * @return Channel template created.
      */
-    postTemplateLanguage(appId: string, code: string, request: CreateChannelTemplateLanguageDto): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
+    postTemplateLanguage(appId: string, code: string, request: CreateChannelTemplateLanguageDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5281,6 +5366,7 @@ export class SmsTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -5331,7 +5417,7 @@ export class SmsTemplatesClient {
      * @param code The template code.
      * @param request The request object.
      */
-    putTemplate(appId: string, code: string, request: UpdateChannelTemplateDtoOfSmsTemplateDto): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
+    putTemplate(appId: string, code: string, request: UpdateChannelTemplateDtoOfSmsTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5346,6 +5432,7 @@ export class SmsTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -5396,7 +5483,7 @@ export class SmsTemplatesClient {
      * @param code The template ID.
      * @return Channel template deleted.
      */
-    deleteTemplate(appId: string, code: string): Promise<void> {
+    deleteTemplate(appId: string, code: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/{code}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5408,6 +5495,7 @@ export class SmsTemplatesClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
@@ -5455,7 +5543,7 @@ export class SmsTemplatesClient {
      * @param language The language.
      * @param request The request object.
      */
-    putTemplateLanguage(appId: string, code: string, language: string, request: SmsTemplateDto): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
+    putTemplateLanguage(appId: string, code: string, language: string, request: SmsTemplateDto, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/{code}/{language}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5473,6 +5561,7 @@ export class SmsTemplatesClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -5523,7 +5612,7 @@ export class SmsTemplatesClient {
      * @param code The template ID.
      * @param language The language.
      */
-    deleteTemplateLanguage(appId: string, code: string, language: string): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
+    deleteTemplateLanguage(appId: string, code: string, language: string, signal?: AbortSignal): Promise<ChannelTemplateDetailsDtoOfSmsTemplateDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/sms-templates/{code}/{language}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5538,6 +5627,7 @@ export class SmsTemplatesClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5596,12 +5686,13 @@ export class AppsClient {
      * Get the user apps.
      * @return Apps returned.
      */
-    getApps(): Promise<AppDto[]> {
+    getApps(signal?: AbortSignal): Promise<AppDto[]> {
         let url_ = this.baseUrl + "/api/apps";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5640,7 +5731,7 @@ export class AppsClient {
      * @param request The request object.
      * @return App created.
      */
-    postApp(request: UpsertAppDto): Promise<AppDto> {
+    postApp(request: UpsertAppDto, signal?: AbortSignal): Promise<AppDto> {
         let url_ = this.baseUrl + "/api/apps";
         url_ = url_.replace(/[?&]$/, "");
 
@@ -5649,6 +5740,7 @@ export class AppsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -5694,7 +5786,7 @@ export class AppsClient {
      * @param appId The id of the app.
      * @return Apps returned.
      */
-    getApp(appId: string): Promise<AppDetailsDto> {
+    getApp(appId: string, signal?: AbortSignal): Promise<AppDetailsDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5703,6 +5795,7 @@ export class AppsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5746,7 +5839,7 @@ export class AppsClient {
      * @param request The request object.
      * @return App updated.
      */
-    putApp(appId: string, request: UpsertAppDto): Promise<AppDetailsDto> {
+    putApp(appId: string, request: UpsertAppDto, signal?: AbortSignal): Promise<AppDetailsDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5758,6 +5851,7 @@ export class AppsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -5808,7 +5902,7 @@ export class AppsClient {
      * @param request The request object.
      * @return Apps returned.
      */
-    postContributor(appId: string, request: AddContributorDto): Promise<AppDetailsDto> {
+    postContributor(appId: string, request: AddContributorDto, signal?: AbortSignal): Promise<AppDetailsDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/contributors";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5820,6 +5914,7 @@ export class AppsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -5870,7 +5965,7 @@ export class AppsClient {
      * @param contributorId The contributor to remove.
      * @return Apps returned.
      */
-    deleteContributor(appId: string, contributorId: string): Promise<AppDetailsDto> {
+    deleteContributor(appId: string, contributorId: string, signal?: AbortSignal): Promise<AppDetailsDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/contributors/{contributorId}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5882,6 +5977,7 @@ export class AppsClient {
 
         let options_: RequestInit = {
             method: "POST",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5930,7 +6026,7 @@ export class AppsClient {
      * @param appId The id of the app where the integrations belong to.
      * @return App email templates returned.
      */
-    getIntegrations(appId: string): Promise<ConfiguredIntegrationsDto> {
+    getIntegrations(appId: string, signal?: AbortSignal): Promise<ConfiguredIntegrationsDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/integrations";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5939,6 +6035,7 @@ export class AppsClient {
 
         let options_: RequestInit = {
             method: "GET",
+            signal,
             headers: {
                 "Accept": "application/json"
             }
@@ -5982,7 +6079,7 @@ export class AppsClient {
      * @param request The request object.
      * @return App integration created.
      */
-    postIntegration(appId: string, request: CreateIntegrationDto): Promise<IntegrationCreatedDto> {
+    postIntegration(appId: string, request: CreateIntegrationDto, signal?: AbortSignal): Promise<IntegrationCreatedDto> {
         let url_ = this.baseUrl + "/api/apps/{appId}/integration";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -5994,6 +6091,7 @@ export class AppsClient {
         let options_: RequestInit = {
             body: content_,
             method: "POST",
+            signal,
             headers: {
                 "Content-Type": "application/json",
                 "Accept": "application/json"
@@ -6045,7 +6143,7 @@ export class AppsClient {
      * @param request The request object.
      * @return App integration updated.
      */
-    putIntegration(appId: string, id: string, request: UpdateIntegrationDto): Promise<void> {
+    putIntegration(appId: string, id: string, request: UpdateIntegrationDto, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/integrations/{id}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -6060,6 +6158,7 @@ export class AppsClient {
         let options_: RequestInit = {
             body: content_,
             method: "PUT",
+            signal,
             headers: {
                 "Content-Type": "application/json",
             }
@@ -6107,7 +6206,7 @@ export class AppsClient {
      * @param id The id of the integration.
      * @return App integration deleted.
      */
-    deleteIntegration(appId: string, id: string): Promise<void> {
+    deleteIntegration(appId: string, id: string, signal?: AbortSignal): Promise<void> {
         let url_ = this.baseUrl + "/api/apps/{appId}/integrations/{id}";
         if (appId === undefined || appId === null)
             throw new Error("The parameter 'appId' must be defined.");
@@ -6119,6 +6218,7 @@ export class AppsClient {
 
         let options_: RequestInit = {
             method: "DELETE",
+            signal,
             headers: {
             }
         };
diff --git a/frontend/src/app/texts/tr.ts b/frontend/src/app/texts/tr.ts
index 2b7b3481..70158e04 100644
--- a/frontend/src/app/texts/tr.ts
+++ b/frontend/src/app/texts/tr.ts
@@ -153,7 +153,7 @@ export const TR = {
         profile: 'Profil',
         profileSettings: 'Ayarlarınız',
         propability: 'Olasılık',
-        properties: 'Özellikler',
+        properties: 'Properties',
         property: 'Özellik',
         publish: 'Yayımla',
         refresh: 'Yenile',
diff --git a/tools/sdk/CodeGenerator/Program.cs b/tools/sdk/CodeGenerator/Program.cs
index c5680fa7..b36a18f8 100644
--- a/tools/sdk/CodeGenerator/Program.cs
+++ b/tools/sdk/CodeGenerator/Program.cs
@@ -63,7 +63,8 @@ private static void GenerateTypescript(OpenApiDocument document)
         var generatorSettings = new TypeScriptClientGeneratorSettings
         {
             GenerateOptionalParameters = true,
-            OperationNameGenerator = new TagNameGenerator()
+            OperationNameGenerator = new TagNameGenerator(),
+            UseAbortSignal = true,
         };
 
         generatorSettings.TypeScriptGeneratorSettings.TypeStyle = TypeScriptTypeStyle.Interface;
diff --git a/tools/sdk/Notifo.SDK/Generated.cs b/tools/sdk/Notifo.SDK/Generated.cs
index 2054f466..fdf2ddef 100644
--- a/tools/sdk/Notifo.SDK/Generated.cs
+++ b/tools/sdk/Notifo.SDK/Generated.cs
@@ -9139,7 +9139,7 @@ public partial interface IEmailTemplatesClient
         /// Get the template properties.
         /// </summary>
         /// <param name="appId">The id of the app where the templates belong to.</param>
-        /// <returns>Channel templates returned.</returns>
+        /// <returns>Channel templates properties returned.</returns>
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
 
@@ -9767,7 +9767,7 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
         /// Get the template properties.
         /// </summary>
         /// <param name="appId">The id of the app where the templates belong to.</param>
-        /// <returns>Channel templates returned.</returns>
+        /// <returns>Channel templates properties returned.</returns>
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         public virtual async System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken))
         {
@@ -9828,7 +9828,7 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
                         if (status_ == 404)
                         {
                             string responseText_ = ( response_.Content == null ) ? string.Empty : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
-                            throw new NotifoException("Channel template or app not found.", status_, responseText_, headers_, null);
+                            throw new NotifoException("App not found.", status_, responseText_, headers_, null);
                         }
                         else
                         if (status_ == 500)
@@ -10691,7 +10691,7 @@ public partial interface IMessagingTemplatesClient
         /// Get the template properties.
         /// </summary>
         /// <param name="appId">The id of the app where the templates belong to.</param>
-        /// <returns>Channel templates returned.</returns>
+        /// <returns>Channel templates properties returned.</returns>
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
 
@@ -11019,7 +11019,7 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
         /// Get the template properties.
         /// </summary>
         /// <param name="appId">The id of the app where the templates belong to.</param>
-        /// <returns>Channel templates returned.</returns>
+        /// <returns>Channel templates properties returned.</returns>
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         public virtual async System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken))
         {
@@ -11080,7 +11080,7 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
                         if (status_ == 404)
                         {
                             string responseText_ = ( response_.Content == null ) ? string.Empty : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
-                            throw new NotifoException("Channel template or app not found.", status_, responseText_, headers_, null);
+                            throw new NotifoException("App not found.", status_, responseText_, headers_, null);
                         }
                         else
                         if (status_ == 500)
@@ -11943,7 +11943,7 @@ public partial interface ISmsTemplatesClient
         /// Get the template properties.
         /// </summary>
         /// <param name="appId">The id of the app where the templates belong to.</param>
-        /// <returns>Channel templates returned.</returns>
+        /// <returns>Channel templates properties returned.</returns>
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken));
 
@@ -12271,7 +12271,7 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
         /// Get the template properties.
         /// </summary>
         /// <param name="appId">The id of the app where the templates belong to.</param>
-        /// <returns>Channel templates returned.</returns>
+        /// <returns>Channel templates properties returned.</returns>
         /// <exception cref="NotifoException">A server side error occurred.</exception>
         public virtual async System.Threading.Tasks.Task<ListResponseDtoOfTemplatePropertyDto> GetPropertiesAsync(string appId, System.Threading.CancellationToken cancellationToken = default(System.Threading.CancellationToken))
         {
@@ -12332,7 +12332,7 @@ private static Newtonsoft.Json.JsonSerializerSettings CreateSerializerSettings()
                         if (status_ == 404)
                         {
                             string responseText_ = ( response_.Content == null ) ? string.Empty : await response_.Content.ReadAsStringAsync().ConfigureAwait(false);
-                            throw new NotifoException("Channel template or app not found.", status_, responseText_, headers_, null);
+                            throw new NotifoException("App not found.", status_, responseText_, headers_, null);
                         }
                         else
                         if (status_ == 500)