Improve queries

backend/src/Squidex.Data.EntityFramework/Domain/Apps/Entities/Contents/ContentSqlQueryBuilder.cs

@@ -10,12 +10,12 @@ using Squidex.Text;
 
 namespace Squidex.Domain.Apps.Entities.Contents;
 
-public class ContentSqlQueryBuilder(SqlDialect dialect, string table, SqlParams? parameters = null) : SqlQueryBuilder(dialect, table, parameters)
+public class ContentSqlQueryBuilder(SqlDialect dialect, string table, SqlParams? parameters = null)
+    : SqlQueryBuilder(dialect, table, parameters)
 {
     public override PropertyPath Visit(PropertyPath path)
     {
         var elements = path.ToList();
-
         elements[0] = elements[0].ToPascalCase();
 
         return new PropertyPath(elements);

backend/src/Squidex.Data.EntityFramework/Infrastructure/Queries/SqlDialect.cs

@@ -144,7 +144,7 @@ public class SqlDialect
         throw new NotSupportedException();
     }
 
-    protected virtual string FormatValues(CompareOperator op, ClrValue value, SqlParams queryParameters)
+    protected virtual string FormatValues(CompareOperator op, ClrValue value, SqlParams queryParameters, bool withoutBraces = false)
     {
         if (!value.IsList && value.ValueType == ClrValueType.Null)
         {
@@ -170,6 +170,11 @@ public class SqlDialect
 
         if (op == CompareOperator.In)
         {
+            if (withoutBraces)
+            {
+                return string.Join(", ", parameters);
+            }
+
             return $"({string.Join(", ", parameters)})";
         }
 

backend/src/Squidex.Data.EntityFramework/Providers/MySql/MySqlDialect.cs

@@ -5,6 +5,7 @@
 //  All rights reserved. Licensed under the MIT license.
 // ==========================================================================
 
+using System.Text;
 using MySqlConnector;
 using Squidex.Infrastructure.Queries;
 
@@ -85,7 +86,13 @@ public sealed class MySqlDialect : SqlDialect
             var sqlOrder = FormatOrder(order);
             var sqlPath = path.JsonPath();
 
-            return $"IF(JSON_TYPE(JSON_EXTRACT({sqlPath})) IN ('INTEGER', 'DOUBLE', 'DECIMAL'), CAST(JSON_VALUE({sqlPath}) AS DOUBLE), NULL) {sqlOrder}, JSON_VALUE({sqlPath}) {sqlOrder}";
+            return $"""
+                IF (JSON_TYPE(JSON_EXTRACT({sqlPath})) IN ('INTEGER', 'DOUBLE', 'DECIMAL'),
+                    CAST(JSON_VALUE({sqlPath}) AS DOUBLE),
+                    NULL
+                ) {sqlOrder},
+                JSON_VALUE({sqlPath}) {sqlOrder}
+                """;
         }
 
         return base.OrderBy(path, order, isJson);
@@ -100,15 +107,54 @@ public sealed class MySqlDialect : SqlDialect
     {
         if (isJson)
         {
+            var sqlPath = path.JsonPath();
+            var sqlOp = FormatOperator(op, value);
+            var sqlRhs = FormatValues(op, value, queryParameters);
             var isBoolean = value.ValueType is ClrValueType.Boolean;
-            if (isBoolean)
+
+            string ScalarCondition()
             {
-                var sqlPath = path.JsonPath();
+                if (isBoolean)
-                var sqlOp = FormatOperator(op, value);
+                {
-                var sqlRhs = FormatValues(op, value, queryParameters);
+                    return $"IF(JSON_VALUE({sqlPath}) = 'true', 1, 0) {sqlOp} {sqlRhs}";
+                }
 
-                return $"IF(JSON_VALUE({sqlPath}) = 'true', 1, 0) {sqlOp} {sqlRhs}";
+                return base.Where(path, op, value, queryParameters, isJson);
+            }
+
+            if (value.IsList && op == CompareOperator.In)
+            {
+                return $"""
+                    IF(
+                        JSON_TYPE(JSON_EXTRACT({sqlPath})) = 'ARRAY',
+                        JSON_OVERLAPS(JSON_EXTRACT({sqlPath}), JSON_ARRAY{sqlRhs}),
+                        JSON_CONTAINS(JSON_ARRAY{sqlRhs}, JSON_EXTRACT({sqlPath}))
+                    )
+                    """;
             }
+
+            if (op == CompareOperator.Equals)
+            {
+                var valueExpr = value.ValueType switch
+                {
+                    ClrValueType.Boolean =>
+                        $"IF({sqlRhs} = 1, 'true', 'false')",
+                    ClrValueType.String =>
+                        $"JSON_QUOTE({sqlRhs})",
+                    _ =>
+                        $"CAST({sqlRhs} AS JSON)",
+                };
+
+                return $"""
+                    IF(
+                        JSON_TYPE(JSON_EXTRACT({sqlPath})) = 'ARRAY',
+                        JSON_CONTAINS(JSON_EXTRACT({sqlPath}), {valueExpr}),
+                        {ScalarCondition()}
+                    )
+                    """;
+            }
+
+            return ScalarCondition();
         }
 
         return base.Where(path, op, value, queryParameters, isJson);

backend/src/Squidex.Data.EntityFramework/Providers/Postgres/PostgresDialect.cs

@@ -5,6 +5,7 @@
 //  All rights reserved. Licensed under the MIT license.
 // ==========================================================================
 
+using System.Text;
 using Npgsql;
 using Squidex.Infrastructure.Queries;
 using Squidex.Providers.Postgres.App;
@@ -71,27 +72,74 @@ public class PostgresDialect : SqlDialect
     {
         if (isJson)
         {
-            var issNumeric = value.ValueType is
+            var sqlPathCast = path.JsonPath(true);
+            var sqlPath = path.JsonPath(false);
+            var sqlOp = FormatOperator(op, value);
+            var sqlRhs = FormatValues(op, value, queryParameters);
+
+            var isBoolean = value.ValueType is ClrValueType.Boolean;
+
+            var isNumeric = value.ValueType is
                 ClrValueType.Single or
                 ClrValueType.Double or
                 ClrValueType.Int32 or
                 ClrValueType.Int64;
-            if (issNumeric)
+
+            string ScalarCondition()
             {
-                var sqlOp = FormatOperator(op, value);
+                if (isNumeric)
-                var sqlRhs = FormatValues(op, value, queryParameters);
+                {
+                    return $"(CASE WHEN jsonb_typeof({sqlPath}) = 'number' THEN ({sqlPathCast})::numeric {sqlOp} {sqlRhs} ELSE FALSE END)";
+                }
 
-                return $"(CASE WHEN jsonb_typeof({path.JsonPath(false)}) = 'number' THEN ({path.JsonPath(true)})::numeric {sqlOp} {sqlRhs} ELSE FALSE END)";
+                if (isBoolean)
+                {
+                    return $"(CASE WHEN jsonb_typeof({sqlPath}) = 'boolean' THEN ({sqlPathCast})::boolean {sqlOp} {sqlRhs} ELSE FALSE END)";
+                }
+
+                return base.Where(path, op, value, queryParameters, true);
             }
 
-            var isBoolean = value.ValueType is ClrValueType.Boolean;
+            string ToJsonbValue()
-            if (isBoolean)
+            {
+                if (isNumeric)
+                {
+                    return $"to_jsonb({sqlRhs}::numeric)";
+                }
+
+                if (isBoolean)
+                {
+                    return $"to_jsonb({sqlRhs}::boolean)";
+                }
+
+                return $"to_jsonb({sqlRhs}::text)";
+            }
+
+            if (value.IsList && op == CompareOperator.In)
             {
-                var sqlOp = FormatOperator(op, value);
+                return $"""
-                var sqlRhs = FormatValues(op, value, queryParameters);
+                    CASE WHEN jsonb_typeof({sqlPath}) = 'array'
+                        THEN EXISTS (
+                            SELECT 1
+                            FROM jsonb_array_elements({sqlPath}) AS elem
+                            WHERE jsonb_build_array{sqlRhs} @> elem
+                        )
+                        ELSE {sqlPath} <@ jsonb_build_array{sqlRhs}
+                    END
+                    """;
+            }
 
-                return $"(CASE WHEN jsonb_typeof({path.JsonPath(false)}) = 'boolean' THEN ({path.JsonPath(true)})::boolean {sqlOp} {sqlRhs} ELSE FALSE END)";
+            if (op == CompareOperator.Equals)
+            {
+                return $"""
+                    CASE WHEN jsonb_typeof({sqlPath}) = 'array'
+                        THEN {sqlPath} @> jsonb_build_array({ToJsonbValue()})
+                        ELSE {ScalarCondition()}
+                    END
+                    """;
             }
+
+            return ScalarCondition();
         }
 
         return base.Where(path, op, value, queryParameters, isJson);

backend/src/Squidex.Data.EntityFramework/Providers/SqlServer/SqlServerDialect.cs

@@ -5,6 +5,7 @@
 //  All rights reserved. Licensed under the MIT license.
 // ==========================================================================
 
+using System.Text;
 using Squidex.Infrastructure.Queries;
 using SqlException = Microsoft.Data.SqlClient.SqlException;
 
@@ -87,45 +88,96 @@ public sealed class SqlServerDialect : SqlDialect
     {
         if (isJson)
         {
-            var issNumeric = value.ValueType is
+            var sqlPath = path.JsonPath();
+            var sqlOp = FormatOperator(op, value);
+            var sqlRhs = FormatValues(op, value, queryParameters);
+
+            var isNull = value.ValueType is ClrValueType.Null;
+            var isBoolean = value.ValueType is ClrValueType.Boolean;
+            var isNumeric = value.ValueType is
                 ClrValueType.Single or
                 ClrValueType.Double or
                 ClrValueType.Int32 or
                 ClrValueType.Int64;
-            if (issNumeric)
+
+            string ScalarCondition()
             {
-                var sqlPath = path.JsonPath();
+                if (isNull)
-                var sqlOp = FormatOperator(op, value);
+                {
-                var sqlRhs = FormatValues(op, value, queryParameters);
+                    if (op == CompareOperator.Equals)
+                    {
+                        return $"JSON_QUERY({sqlPath}) IS NULL AND JSON_VALUE({sqlPath}) IS NULL";
+                    }
+
+                    if (op == CompareOperator.NotEquals)
+                    {
+                        return $"JSON_QUERY({sqlPath}) IS NOT NULL OR JSON_VALUE({sqlPath}) IS NOT NULL";
+                    }
+                }
 
-                return $"TRY_CAST(JSON_VALUE({sqlPath}) AS NUMERIC) {sqlOp} {sqlRhs}";
+                if (isNumeric)
-            }
+                {
+                    return $"TRY_CAST(JSON_VALUE({sqlPath}) AS NUMERIC) {sqlOp} {sqlRhs}";
+                }
 
-            var isBoolean = value.ValueType is ClrValueType.Boolean;
+                if (isBoolean)
-            if (isBoolean)
+                {
-            {
+                    return $"IIF(JSON_VALUE({sqlPath}) = 'true', 1, 0) {sqlOp} {sqlRhs}";
-                var sqlPath = path.JsonPath();
+                }
-                var sqlOp = FormatOperator(op, value);
-                var sqlRhs = FormatValues(op, value, queryParameters);
 
-                return $"IIF(JSON_VALUE({sqlPath}) = 'true', 1, 0) {sqlOp} {sqlRhs}";
+                return base.Where(path, op, value, queryParameters, isJson);
             }
 
-            var isNull = value.ValueType is ClrValueType.Null;
+            string ArrayCondition(string field, string op)
-            if (isNull)
             {
-                var sqlPath = path.JsonPath();
+                if (isNumeric)
-
-                if (op == CompareOperator.Equals)
                 {
-                    return $"JSON_QUERY({sqlPath}) IS NULL AND JSON_VALUE({sqlPath}) IS NULL";
+                    return $"TRY_CAST({field} AS NUMERIC) {op} {sqlRhs}";
                 }
 
-                if (op == CompareOperator.NotEquals)
+                if (isBoolean)
                 {
-                    return $"JSON_QUERY({sqlPath}) IS NOT NULL OR JSON_VALUE({sqlPath}) IS NOT NULL";
+                    return $"IIF({field} = 'true', 1, 0) {op} {sqlRhs}";
                 }
+
+                return $"{field} = {sqlRhs}";
+            }
+
+            if (value.IsList && op == CompareOperator.In)
+            {
+                return $"""
+                    CASE WHEN LEFT(JSON_QUERY({sqlPath}), 1) = '['
+                        THEN (
+                            SELECT COUNT(*)
+                            FROM OPENJSON({sqlPath}) AS field_arr
+                            WHERE {ArrayCondition("field_arr.value", "IN")}
+                        )
+                        ELSE (
+                            SELECT COUNT(*)
+                            WHERE {ScalarCondition()}
+                        )
+                    END > 0
+                    """;
+            }
+
+            if (op == CompareOperator.Equals)
+            {
+                return $"""
+                    CASE WHEN LEFT(JSON_QUERY({sqlPath}), 1) = '['
+                        THEN (
+                            SELECT COUNT(*)
+                            FROM OPENJSON({sqlPath}) AS field_arr
+                            WHERE {ArrayCondition("field_arr.value", "=")}
+                        )
+                        ELSE (
+                            SELECT COUNT(*)
+                            WHERE {ScalarCondition()}
+                        )
+                    END > 0
+                    """;
             }
+
+            return ScalarCondition();
         }
 
         return base.Where(path, op, value, queryParameters, isJson);

backend/src/Squidex.Infrastructure/Queries/QueryModel.cs

@@ -11,7 +11,7 @@ public sealed class QueryModel
 {
     public static readonly IReadOnlyDictionary<FilterSchemaType, IReadOnlyList<CompareOperator>> DefaultOperators = new Dictionary<FilterSchemaType, IReadOnlyList<CompareOperator>>
     {
-        [FilterSchemaType.Any] = Enum.GetValues(typeof(CompareOperator)).OfType<CompareOperator>().ToList(),
+        [FilterSchemaType.Any] = Enum.GetValues<CompareOperator>().ToList(),
         [FilterSchemaType.Boolean] =
         [
             CompareOperator.Equals,

backend/src/Squidex.Web/Pipeline/SchemaResolver.cs

@@ -31,35 +31,29 @@ public sealed class SchemaResolver : IAsyncActionFilter
     public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
     {
         var app = context.HttpContext.Features.Get<App>();
-
+        if (app != null && context.RouteData.Values.TryGetValue("schema", out var schemaValue))
-        if (app != null)
         {
-            if (context.RouteData.Values.TryGetValue("schema", out var schemaValue))
+            var schemaIdOrName = schemaValue?.ToString();
+            if (string.IsNullOrWhiteSpace(schemaIdOrName))
             {
-                var schemaIdOrName = schemaValue?.ToString();
+                context.Result = new NotFoundResult();
-
+                return;
-                if (string.IsNullOrWhiteSpace(schemaIdOrName))
+            }
-                {
-                    context.Result = new NotFoundResult();
-                    return;
-                }
-
-                var schema = await GetSchemaAsync(app.Id, schemaIdOrName, context.HttpContext.User);
-
-                if (schema == null)
-                {
-                    context.Result = new NotFoundResult();
-                    return;
-                }
 
-                if (context.ActionDescriptor.EndpointMetadata.Any(x => x is SchemaMustBePublishedAttribute) && !schema.IsPublished)
+            var schema = await GetSchemaAsync(app.Id, schemaIdOrName, context.HttpContext.User);
-                {
+            if (schema == null)
-                    context.Result = new NotFoundResult();
+            {
-                    return;
+                context.Result = new NotFoundResult();
-                }
+                return;
+            }
 
-                context.HttpContext.Features.Set(schema);
+            if (context.ActionDescriptor.EndpointMetadata.Any(x => x is SchemaMustBePublishedAttribute) && !schema.IsPublished)
+            {
+                context.Result = new NotFoundResult();
+                return;
             }
+
+            context.HttpContext.Features.Set(schema);
         }
 
         await next();

backend/tests/Squidex.Data.Tests/EntityFramework/Infrastructure/Queries/EFQueryTests.cs

@@ -61,7 +61,7 @@ public abstract class EFQueryTests<TContext>(ISqlFixture<TContext> fixture)
                     mixed = true;
                     break;
                 case 4:
-                    mixed = new List<object> { i };
+                    mixed = new List<object> { i, true };
                     break;
                 default:
                     mixed = new Dictionary<string, object>();
@@ -339,6 +339,28 @@ public abstract class EFQueryTests<TContext>(ISqlFixture<TContext> fixture)
         Assert.Equal([3, 5, 7], actual.Order().ToArray());
     }
 
+    [Fact]
+    public async Task Should_filter_with_equal_in_json_array()
+    {
+        var actual = await QueryAsync(new ClrQuery
+        {
+            Filter = ClrFilter.Eq("Json.array", 3),
+        });
+
+        Assert.Equal([3], actual.Order().ToArray());
+    }
+
+    [Fact]
+    public async Task Should_filter_with_many_in_json_array()
+    {
+        var actual = await QueryAsync(new ClrQuery
+        {
+            Filter = ClrFilter.In("Json.array", new List<int> { 3, 5, 7 }),
+        });
+
+        Assert.Equal([3, 5, 7], actual.Order().ToArray());
+    }
+
     [Fact]
     public async Task Should_filter_with_many_in_mixed_json()
     {

frontend/package.json

@@ -12,7 +12,8 @@
     "watch": "ng build --watch --configuration development",
     "storybook": "ng run squidex:storybook",
     "storybook-build": "ng run squidex:build-storybook",
-    "generate": "dotnet run --project generator/Generator/Generator.csproj"
+    "generate": "dotnet run --project generator/Generator/Generator.csproj",
+    "format": "prettier --write **/*.html"
   },
   "private": true,
   "dependencies": {

frontend/src/app/_theme.html

@@ -1071,8 +1071,8 @@
                     <div class="bs-component" style="margin-bottom: 40px">
                         <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span>
                         <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span>
-                        <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span>
+                        <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span>
-                        <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span>
+                        <span class="badge badge-dark">Dark</span>
                     </div>
 
                     <div class="bs-component">

frontend/src/app/features/api/pages/graphql/graphql-page.component.html

@@ -3,7 +3,7 @@
     <div #graphiQLContainer inner sqxTourStep="graphQLExplorer"></div>
 
     @if (clientsReadable) {
-        <button class="btn btn-simple btn-options" (click)="clientsDialog.show()"><i class="icon-clients"></i></button>
+        <button class="btn btn-simple btn-options" (click)="clientsDialog.show()" type="button"><i class="icon-clients"></i></button>
     }
 </sqx-layout>
 <sqx-modal-dialog (dialogClose)="clientsDialog.hide()" *sqxModal="clientsDialog">

frontend/src/app/features/apps/pages/app.component.html

@@ -51,7 +51,8 @@
                     confirmRememberKey="leaveApp"
                     confirmText="i18n:apps.leaveConfirmText"
                     confirmTitle="i18n:apps.leaveConfirmTitle"
-                    (sqxConfirmClick)="leave.emit(app)">
+                    (sqxConfirmClick)="leave.emit(app)"
+                    type="button">
                     {{ "apps.leave" | sqxTranslate }}
                 </button>
             </sqx-dropdown-menu>

frontend/src/app/features/apps/pages/onboarding-dialog.component.html

@@ -3,7 +3,7 @@
         <div class="squid d-flex align-items-center justify-content-center"><img src="./images/squid.svg" /></div>
     </ng-container>
     <ng-container content>
-        <button class="header-right modal-close btn-inline-link" (click)="cancel()">{{ "tour.skip" | sqxTranslate }}</button>
+        <button class="header-right modal-close btn-inline-link" (click)="cancel()" type="button">{{ "tour.skip" | sqxTranslate }}</button>
         @if (step === 0) {
             <div class="onboarding-step">
                 <img class="header-left" animate.enter="fade-in" animate.leave="fade-out" src="./images/logo-white-small.png" />
@@ -15,7 +15,7 @@
                     <div inline="false" [sqxMarkdown]="'tour.stepIntroText' | sqxTranslate"></div>
 
                     <div class="mt-4">
-                        <button class="btn btn-success" (click)="next()">{{ "tour.stepIntroNext" | sqxTranslate }}</button>
+                        <button class="btn btn-success" (click)="next()" type="button">{{ "tour.stepIntroNext" | sqxTranslate }}</button>
                     </div>
                 </div>
             </div>
@@ -78,8 +78,8 @@
                     <div [sqxMarkdown]="'tour.stepTourText' | sqxTranslate"></div>
 
                     <div class="mt-4">
-                        <button class="btn btn-success" (click)="start()">{{ "tour.startYes" | sqxTranslate }}</button>
+                        <button class="btn btn-success" (click)="start()" type="button">{{ "tour.startYes" | sqxTranslate }}</button>
-                        <button class="btn btn-outline-secondary ms-2" (click)="cancel()">
+                        <button class="btn btn-outline-secondary ms-2" (click)="cancel()" type="button">
                             {{ "tour.startNo" | sqxTranslate }}
                         </button>
                     </div>

frontend/src/app/features/apps/pages/team.component.html

@@ -24,7 +24,8 @@
                     confirmRememberKey="leaveApp"
                     confirmText="i18n:teams.leaveConfirmText"
                     confirmTitle="i18n:teams.leaveConfirmTitle"
-                    (sqxConfirmClick)="leave.emit(team)">
+                    (sqxConfirmClick)="leave.emit(team)"
+                    type="button">
                     {{ "teams.leave" | sqxTranslate }}
                 </button>
             </sqx-dropdown-menu>

frontend/src/app/features/assets/pages/asset-tag-dialog.component.html

@@ -3,7 +3,7 @@
         <ng-container title> {{ "common.renameTag" | sqxTranslate }} </ng-container>
         <ng-container content>
             <sqx-form-error [error]="editForm.error | async" />
-            <sqx-form-row for="tagName" label="common.name" vertical required>
+            <sqx-form-row for="tagName" label="common.name" required vertical>
                 <input class="form-control" id="tagName" autocomplete="off" formControlName="tagName" sqxFocusOnInit />
             </sqx-form-row>
         </ng-container>

frontend/src/app/features/assets/pages/asset-tags.component.html

@@ -1,11 +1,11 @@
 <div class="nav nav-light flex-column">
     <div class="nav-item">
-        <button class="nav-link" [class.active]="isEmpty()" (click)="tagsReset.emit()">{{ "common.tagsAll" | sqxTranslate }}</button>
+        <button class="nav-link" [class.active]="isEmpty()" (click)="tagsReset.emit()" type="button">{{ "common.tagsAll" | sqxTranslate }}</button>
     </div>
 
     @for (tag of tags; track tag.name) {
         <div class="nav-item">
-            <button class="nav-link" [class.active]="isSelected(tag)" (click)="toggle.emit(tag.name)">
+            <button class="nav-link" [class.active]="isSelected(tag)" (click)="toggle.emit(tag.name)" type="button">
                 <div class="row g-0">
                     <div class="col">
                         <span class="truncate">{{ tag.name }}</span>
@@ -15,7 +15,7 @@
                         <div class="badge badge-secondary rounded-pill">{{ tag.count }}</div>
 
                         @if (canRename) {
-                            <button class="btn-sm btn-text-secondary btn-rename" (click)="renameTag(tag)" sqxStopClick>
+                            <button class="btn-sm btn-text-secondary btn-rename" (click)="renameTag(tag)" sqxStopClick type="button">
                                 <i class="icon-pencil"></i>
                             </button>
                         }

frontend/src/app/features/content/pages/content/content-event.component.html

@@ -14,8 +14,8 @@
         <div class="event-created">{{ event.created | sqxFromNow }}</div>
 
         @if (canLoadOrCompare) {
-            <button class="event-load btn-inline-link" (click)="dataLoad.emit()">{{ "contents.loadContent" | sqxTranslate }}</button> &middot;
+            <button class="event-load btn-inline-link" (click)="dataLoad.emit()" type="button">{{ "contents.loadContent" | sqxTranslate }}</button> &middot;
-            <button class="event-load btn-inline-link" (click)="dataCompare.emit()">{{ "contents.versionCompare" | sqxTranslate }}</button>
+            <button class="event-load btn-inline-link" (click)="dataCompare.emit()" type="button">{{ "contents.versionCompare" | sqxTranslate }}</button>
         }
     </div>
 </div>

frontend/src/app/features/content/pages/content/content-history-page.component.html

@@ -18,7 +18,7 @@
         @if (content.canDraftCreate || content.canDraftDelete) {
             <div class="section mb-4">
                 @if (!content.newStatus) {
-                    <button class="btn btn-success btn-block" (click)="createDraft()">{{ "contents.draftNew" | sqxTranslate }}</button>
+                    <button class="btn btn-success btn-block" (click)="createDraft()" type="button">{{ "contents.draftNew" | sqxTranslate }}</button>
                 } @else {
                     <label>{{ "contents.draftStatus" | sqxTranslate }}</label>
                     <button
@@ -36,7 +36,7 @@
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdownNew; closeAlways: true">
                         @if (content.statusUpdates.length > 0) {
                             @for (info of content.statusUpdates; track info) {
-                                <button class="dropdown-item" (click)="changeStatus(info.status)">
+                                <button class="dropdown-item" (click)="changeStatus(info.status)" type="button">
                                     {{ "common.statusChangeTo" | sqxTranslate }}
                                     <i class="icon-circle icon-sm" [style.color]="info.color"></i> {{ info.status }}
                                 </button>
@@ -50,7 +50,8 @@
                             confirmRememberKey="deleteDraft"
                             confirmText="i18n:contents.deleteVersionConfirmText"
                             confirmTitle="i18n:contents.deleteConfirmTitle"
-                            (sqxConfirmClick)="deleteDraft()">
+                            (sqxConfirmClick)="deleteDraft()"
+                            type="button">
                             {{ "contents.versionDelete" | sqxTranslate }}
                         </button>
                         <div class="dropdown-divider"></div>
@@ -60,7 +61,8 @@
                             confirmRememberKey="deleteContent"
                             confirmText="i18n:contents.deleteConfirmText"
                             confirmTitle="i18n:contents.deleteConfirmTitle"
-                            (sqxConfirmClick)="delete()">
+                            (sqxConfirmClick)="delete()"
+                            type="button">
                             {{ "common.delete" | sqxTranslate }}
                         </button>
                     </sqx-dropdown-menu>
@@ -88,7 +90,7 @@
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                         @if (content.statusUpdates.length > 0) {
                             @for (info of content.statusUpdates; track info) {
-                                <button class="dropdown-item" (click)="changeStatus(info.status)">
+                                <button class="dropdown-item" (click)="changeStatus(info.status)" type="button">
                                     {{ "common.statusChangeTo" | sqxTranslate }}
                                     <sqx-content-status layout="text" small="true" [status]="info.status" [statusColor]="info.color" />
                                 </button>
@@ -102,7 +104,8 @@
                             confirmRememberKey="cancelStatus"
                             confirmText="i18n:contents.cancelStatusConfirmText"
                             confirmTitle="i18n:contents.cancelStatusConfirmTitle"
-                            (sqxConfirmClick)="cancelStatus()">
+                            (sqxConfirmClick)="cancelStatus()"
+                            type="button">
                             {{ "contents.cancelStatus" | sqxTranslate }}
                         </button>
                         <div class="dropdown-divider"></div>
@@ -112,7 +115,8 @@
                             confirmRememberKey="deleteContent"
                             confirmText="i18n:contents.deleteConfirmText"
                             confirmTitle="i18n:contents.deleteConfirmTitle"
-                            (sqxConfirmClick)="delete()">
+                            (sqxConfirmClick)="delete()"
+                            type="button">
                             {{ "common.delete" | sqxTranslate }}
                         </button>
                     </sqx-dropdown-menu>

frontend/src/app/features/content/pages/content/content-page.component.html

@@ -4,7 +4,7 @@
         <ng-container title>
             <div class="d-flex align-items-center">
                 @if (schema.type !== "Singleton") {
-                    <button class="btn btn-text-secondary" aria-labelledby="content-back" (click)="back()">
+                    <button class="btn btn-text-secondary" aria-labelledby="content-back" (click)="back()" type="button">
                         <span id="content-back" hidden>{{ "common.back" | sqxTranslate }}</span> <i class="icon-angle-left"></i>
                     </button>
                 }
@@ -75,7 +75,7 @@
                         </button>
                         <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                             @if (content.canClone) {
-                                <button class="dropdown-item" (click)="clone()">
+                                <button class="dropdown-item" (click)="clone()" type="button">
                                     {{ "common.clone" | sqxTranslate }}
                                 </button>
                             }
@@ -86,7 +86,8 @@
                                     confirmRememberKey="deleteContent"
                                     confirmText="i18n:contents.deleteConfirmText"
                                     confirmTitle="i18n:contents.deleteConfirmTitle"
-                                    (sqxConfirmClick)="delete()">
+                                    (sqxConfirmClick)="delete()"
+                                    type="button">
                                     {{ "common.delete" | sqxTranslate }}
                                 </button>
                             }
@@ -133,8 +134,8 @@
                                     scrollY="true"
                                     [sqxAnchoredTo]="buttonSave"
                                     *sqxModal="saveOnlyDropdown; closeAlways: true">
-                                    <button class="dropdown-item" (click)="saveAsDraft('Add')">{{ "common.saveAdd" | sqxTranslate }}</button>
+                                    <button class="dropdown-item" (click)="saveAsDraft('Add')" type="button">{{ "common.saveAdd" | sqxTranslate }}</button>
-                                    <button class="dropdown-item" (click)="saveAsDraft('Close')">{{ "common.saveClose" | sqxTranslate }}</button>
+                                    <button class="dropdown-item" (click)="saveAsDraft('Close')" type="button">{{ "common.saveClose" | sqxTranslate }}</button>
                                 </sqx-dropdown-menu>
                             </div>
                         }
@@ -157,10 +158,10 @@
                                     scrollY="true"
                                     [sqxAnchoredTo]="buttonSave"
                                     *sqxModal="savePublishDropdown; closeAlways: true">
-                                    <button class="dropdown-item" (click)="saveAndPublish('Add')">
+                                    <button class="dropdown-item" (click)="saveAndPublish('Add')" type="button">
                                         {{ "contents.saveAndPublishAdd" | sqxTranslate }}
                                     </button>
-                                    <button class="dropdown-item" (click)="saveAndPublish('Close')">
+                                    <button class="dropdown-item" (click)="saveAndPublish('Close')" type="button">
                                         {{ "contents.saveAndPublishClose" | sqxTranslate }}
                                     </button>
                                 </sqx-dropdown-menu>

frontend/src/app/features/content/pages/content/editor/content-editor.component.html

@@ -8,7 +8,7 @@
         @if (contentVersion) {
             <div class="alert alert-danger">
                 <div class="float-end">
-                    <button (click)="loadLatest.emit()">{{ "contents.viewLatest" | sqxTranslate }}</button>
+                    <button (click)="loadLatest.emit()" type="button">{{ "contents.viewLatest" | sqxTranslate }}</button>
                 </div>
 
                 @if (isDeleted) {

frontend/src/app/features/content/pages/content/inspecting/content-inspection.component.html

@@ -3,19 +3,19 @@
     @if (mode | async; as currentMode) {
         <ul class="nav nav-tabs2">
             <li class="nav-item">
-                <button class="nav-link" [class.active]="currentMode === 'Content'" (click)="setMode('Content')">
+                <button class="nav-link" [class.active]="currentMode === 'Content'" (click)="setMode('Content')" type="button">
                     {{ "contents.inspectContent" | sqxTranslate }}
                 </button>
             </li>
 
             <li class="nav-item">
-                <button class="nav-link" [class.active]="currentMode === 'Data'" (click)="setMode('Data')">
+                <button class="nav-link" [class.active]="currentMode === 'Data'" (click)="setMode('Data')" type="button">
                     {{ "contents.inspectData" | sqxTranslate }}
                 </button>
             </li>
 
             <li class="nav-item">
-                <button class="nav-link" [class.active]="currentMode === 'FlatData'" (click)="setMode('FlatData')">
+                <button class="nav-link" [class.active]="currentMode === 'FlatData'" (click)="setMode('FlatData')" type="button">
                     {{ "contents.inspectFlatData" | sqxTranslate }}
                 </button>
             </li>

frontend/src/app/features/content/shared/forms/array-editor.component.html

@@ -90,7 +90,7 @@
                     </button>
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonSelect" *sqxModal="schemasDropdown; closeAlways: true">
                         @for (schema of schemasList; track schema) {
-                            <button class="dropdown-item" (click)="addComponent(schema)">{{ schema.displayName }}</button>
+                            <button class="dropdown-item" (click)="addComponent(schema)" type="button">{{ schema.displayName }}</button>
                         }
                     </sqx-dropdown-menu>
                 }

frontend/src/app/features/content/shared/forms/component.component.html

@@ -28,7 +28,7 @@
             </button>
             <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonSelect" *sqxModal="schemasDropdown; closeAlways: true">
                 @for (schema of schemasList; track schema) {
-                    <button class="dropdown-item" (click)="setSchema(schema)">{{ schema.displayName }}</button>
+                    <button class="dropdown-item" (click)="setSchema(schema)" type="button">{{ schema.displayName }}</button>
                 }
             </sqx-dropdown-menu>
         }

frontend/src/app/features/content/shared/forms/field-languages.component.html

@@ -9,7 +9,7 @@
                 }
             </button>
         }
-    
+
         @if (formModel.field.properties.isComplexUI || !showAllControls) {
             <sqx-language-selector
                 [exists]="formModel.translationStatus | async"

frontend/src/app/features/content/shared/forms/user-info-editor.component.html

@@ -22,7 +22,7 @@
             <div ngPreserveWhitespaces>Authorization: ApiKey {{ rolesState.appName }}:{{ apiKey | async }}</div>
         </sqx-code>
         <sqx-form-hint>
-          {{ 'common.or' | sqxTranslate }}
+            {{ "common.or" | sqxTranslate }}
         </sqx-form-hint>
         <sqx-code>
             <div ngPreserveWhitespaces>ApiKey: {{ rolesState.appName }}:{{ apiKey | async }}</div>

frontend/src/app/features/content/shared/list/content.component.html

@@ -22,14 +22,14 @@
         <sqx-dropdown-menu position="bottom-start" scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
             <a class="dropdown-item" [routerLink]="link" sqxExternalLink target="_blank"> {{ "common.editInNewTab" | sqxTranslate }} </a>
             @for (info of content.statusUpdates; track info) {
-                <button class="dropdown-item" (click)="statusChange.emit(info.status)">
+                <button class="dropdown-item" (click)="statusChange.emit(info.status)" type="button">
                     {{ "common.statusChangeTo" | sqxTranslate }}
                     <sqx-content-status layout="text" small="true" [status]="info.status" [statusColor]="info.color" />
                 </button>
             }
 
             @if (cloneable) {
-                <button class="dropdown-item" (click)="clone.emit(); dropdown.hide()">{{ "common.clone" | sqxTranslate }}</button>
+                <button class="dropdown-item" (click)="clone.emit(); dropdown.hide()" type="button">{{ "common.clone" | sqxTranslate }}</button>
             }
 
             <div class="dropdown-divider"></div>
@@ -39,7 +39,8 @@
                 confirmRememberKey="deleteContent"
                 confirmText="i18n:contents.deleteConfirmText"
                 confirmTitle="i18n:contents.deleteConfirmTitle"
-                (sqxConfirmClick)="delete.emit()">
+                (sqxConfirmClick)="delete.emit()"
+                type="button">
                 {{ "common.delete" | sqxTranslate }}
             </button>
         </sqx-dropdown-menu>

frontend/src/app/features/content/shared/preview-button.component.html

@@ -9,7 +9,7 @@
                 <button class="btn btn-secondary dropdown-toggle" (click)="dropdown.toggle()" type="button"></button>
                 <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonGroup" *sqxModal="dropdown; closeAlways: true">
                     @for (name of snapshot.previewNamesMore; track name) {
-                        <button class="dropdown-item" (click)="follow(name)">{{ name }}</button>
+                        <button class="dropdown-item" (click)="follow(name)" type="button">{{ name }}</button>
                     }
                 </sqx-dropdown-menu>
             </div>

frontend/src/app/features/content/shared/references/reference-item.component.html

@@ -44,7 +44,7 @@
                 <i class="icon-dots"></i>
             </button>
             <div class="reference-menu">
-                <button class="btn btn-text-secondary" (click)="clone.emit()" title="{{ 'common.clone' | sqxTranslate }}">
+                <button class="btn btn-text-secondary" (click)="clone.emit()" title="{{ 'common.clone' | sqxTranslate }}" type="button">
                     <i class="icon-copy"></i>
                 </button>
                 @if (canRemove) {

frontend/src/app/features/content/shared/references/references-tags.component.ts

@@ -144,7 +144,6 @@ export class ReferencesTagsComponent extends StatefulControlComponent<State, Rea
 
                     for (const content of items) {
                         const index = this.contents.findIndex(x => x.id === content.id);
-
                         if (index >= 0) {
                             this.contents[index] = content;
                         } else {
@@ -153,12 +152,10 @@ export class ReferencesTagsComponent extends StatefulControlComponent<State, Rea
                     }
 
                     this.isLoadingFailed = false;
-
                     this.resetConverterState(true);
                 },
                 error: () => {
                     this.isLoadingFailed = true;
-
                     this.resetConverterState(false);
                 },
             });
@@ -171,7 +168,6 @@ export class ReferencesTagsComponent extends StatefulControlComponent<State, Rea
 
         if (rebuild) {
             const converter = new ReferencesTagsConverter(this.language, this.contents, this.localizer);
-
             this.next({ converter });
         }
 

frontend/src/app/features/dashboard/pages/dashboard-config.component.html

@@ -24,8 +24,8 @@
         }
 
         <div class="dropdown-divider"></div>
-        <button class="dropdown-item" (click)="startExpertMode()"> {{ "common.expertMode" | sqxTranslate }} </button>
+        <button class="dropdown-item" (click)="startExpertMode()" type="button">{{ "common.expertMode" | sqxTranslate }}</button>
-        <button class="dropdown-item" (click)="saveConfig()"> {{ "common.save" | sqxTranslate }} </button>
+        <button class="dropdown-item" (click)="saveConfig()" type="button">{{ "common.save" | sqxTranslate }}</button>
         <div class="dropdown-divider"></div>
         <button
             class="dropdown-item dropdown-item-delete"
@@ -33,7 +33,8 @@
             confirmRememberKey="resetConfig"
             confirmText="i18n:dashboard.resetConfigConfirmText"
             confirmTitle="i18n:dashboard.resetConfigConfirmTitle"
-            (sqxConfirmClick)="resetConfig()">
+            (sqxConfirmClick)="resetConfig()"
+            type="button">
             {{ "common.reset" | sqxTranslate }}
         </button>
     </sqx-dropdown-menu>

frontend/src/app/features/dashboard/pages/dashboard-page.component.html

@@ -24,7 +24,8 @@
                             <sqx-github-card />
                         }
 
-                        @case ("api-calls") {animate.enter="fade-in" animate.leave="fade-out"
+                        @case ("api-calls") {
+                            animate.enter="fade-in" animate.leave="fade-out"
                             <sqx-api-calls-card [app]="app" [usage]="callsUsage" />
                         }
 

frontend/src/app/features/rules/pages/events/rule-event.component.html

@@ -80,7 +80,7 @@
             </div>
 
             <div class="event-section">
-                <sqx-state-details [availableSteps]="availableSteps" [state]="event.flowState" [branchItems]="branchItems" />
+                <sqx-state-details [availableSteps]="availableSteps" [branchItems]="branchItems" [state]="event.flowState" />
             </div>
         </td>
     </tr>

frontend/src/app/features/rules/pages/rule/branch.component.html

@@ -14,7 +14,11 @@
     @if (branchItems.length > 0) {
         @for (item of branchItems; track item.id; let last = $last; let i = $index) {
             <div class="centered">
-                <button class="btn btn-outline-secondary btn-circle-sm" attr.aria-label="{{ 'rules.addStep' | sqxTranslate }}" (click)="add(i - 1)">
+                <button
+                    class="btn btn-outline-secondary btn-circle-sm"
+                    attr.aria-label="{{ 'rules.addStep' | sqxTranslate }}"
+                    (click)="add(i - 1)"
+                    type="button">
                     <i class="icon-plus"></i>
                 </button>
             </div>
@@ -60,7 +64,11 @@
 
             @if (last && item.step.step.stepType !== "If") {
                 <div class="centered">
-                    <button class="btn btn-outline-secondary btn-circle-sm" attr.aria-label="{{ 'rules.addStep' | sqxTranslate }}" (click)="add(i)">
+                    <button
+                        class="btn btn-outline-secondary btn-circle-sm"
+                        attr.aria-label="{{ 'rules.addStep' | sqxTranslate }}"
+                        (click)="add(i)"
+                        type="button">
                         <i class="icon-plus"></i>
                     </button>
                 </div>
@@ -68,7 +76,7 @@
         }
     } @else {
         <div class="centered">
-            <button class="btn btn-outline-secondary btn-circle" attr.aria-label="{{ 'rules.addStep' | sqxTranslate }}" (click)="add()">
+            <button class="btn btn-outline-secondary btn-circle" attr.aria-label="{{ 'rules.addStep' | sqxTranslate }}" (click)="add()" type="button">
                 <i class="icon-plus"></i>
             </button>
         </div>

frontend/src/app/features/rules/pages/rule/rule-page.component.html

@@ -2,7 +2,7 @@
 <sqx-layout layout="main" overflow="true" padding="true" white="true">
     <ng-container title>
         <div class="d-flex align-items-center">
-            <button class="btn btn-text-secondary" attr.aria-label="{{ 'common.back' | sqxTranslate }}" (click)="back()">
+            <button class="btn btn-text-secondary" attr.aria-label="{{ 'common.back' | sqxTranslate }}" (click)="back()" type="button">
                 <i class="icon-angle-left"></i>
             </button>
             <h3 class="title">{{ "common.rule" | sqxTranslate }}</h3>
@@ -18,7 +18,8 @@
                 confirmText="i18n:rules.triggerConfirmText"
                 confirmTitle="i18n:rules.triggerConfirmTitle"
                 [disabled]="!rule?.canTrigger"
-                (sqxConfirmClick)="trigger()">
+                (sqxConfirmClick)="trigger()"
+                type="button">
                 <i class="icon-play-line"></i>
             </button>
         }
@@ -67,7 +68,8 @@
                                 <button
                                     class="btn btn-outline-secondary btn-circle"
                                     attr.aria-label="{{ 'rules.addTrigger' | sqxTranslate }}"
-                                    (click)="triggerDialog.show()">
+                                    (click)="triggerDialog.show()"
+                                    type="button">
                                     <i class="icon-plus"></i>
                                 </button>
                             }

frontend/src/app/features/rules/pages/rules/rule.component.html

@@ -22,15 +22,15 @@
                 </button>
                 <sqx-dropdown-menu position="bottom-end" scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                     @if (rule.canUpdate) {
-                        <button class="dropdown-item" [routerLink]="rule.id">{{ "common.edit" | sqxTranslate }}</button>
+                        <button class="dropdown-item" [routerLink]="rule.id" type="button">{{ "common.edit" | sqxTranslate }}</button>
                     }
 
                     @if (rule.canEnable) {
-                        <button class="dropdown-item" (click)="enable()">{{ "common.enable" | sqxTranslate }}</button>
+                        <button class="dropdown-item" (click)="enable()" type="button">{{ "common.enable" | sqxTranslate }}</button>
                     }
 
                     @if (rule.canDisable) {
-                        <button class="dropdown-item" (click)="disable()">{{ "common.disable" | sqxTranslate }}</button>
+                        <button class="dropdown-item" (click)="disable()" type="button">{{ "common.disable" | sqxTranslate }}</button>
                     }
 
                     <div class="dropdown-divider"></div>
@@ -42,7 +42,8 @@
                                 confirmRememberKey="runRule"
                                 confirmText="i18n:rules.runRuleConfirmText"
                                 confirmTitle="i18n:rules.runRuleConfirmTitle"
-                                (sqxConfirmClick)="run()">
+                                (sqxConfirmClick)="run()"
+                                type="button">
                                 {{ "rules.run" | sqxTranslate }}
                             </button>
                         }
@@ -53,7 +54,8 @@
                                 confirmRememberKey="runRuleFromSnapshots"
                                 confirmText="i18n:rules.runRuleConfirmText"
                                 confirmTitle="i18n:rules.runRuleConfirmTitle"
-                                (sqxConfirmClick)="runFromSnapshots()">
+                                (sqxConfirmClick)="runFromSnapshots()"
+                                type="button">
                                 {{ "rules.runFromSnapshots" | sqxTranslate }}
                             </button>
                         }
@@ -67,7 +69,8 @@
                             confirmRememberKey="deleteRule"
                             confirmText="i18n:rules.deleteConfirmText"
                             confirmTitle="i18n:rules.deleteConfirmTitle"
-                            (sqxConfirmClick)="delete()">
+                            (sqxConfirmClick)="delete()"
+                            type="button">
                             {{ "common.delete" | sqxTranslate }}
                         </button>
                     }
@@ -118,7 +121,8 @@
                         confirmText="i18n:rules.triggerConfirmText"
                         confirmTitle="i18n:rules.triggerConfirmTitle"
                         [disabled]="!rule.canTrigger"
-                        (sqxConfirmClick)="trigger()">
+                        (sqxConfirmClick)="trigger()"
+                        type="button">
                         <i class="icon-play-line"></i>
                     </button>
                 } @else {

frontend/src/app/features/rules/pages/rules/rules-page.component.html

@@ -15,7 +15,7 @@
             @if (rulesState.runningRule | async; as runningRule) {
                 <div class="alert alert-danger d-flex justify-content-between align-items-center p-2 ps-4 mb-4">
                     {{ "rules.runningRule" | sqxTranslate: { name: runningRule.name || "Unnamed Rule" } }}
-                    <button class="btn" (click)="cancelRun()">{{ "common.cancel" | sqxTranslate }}</button>
+                    <button class="btn" (click)="cancelRun()" type="button">{{ "common.cancel" | sqxTranslate }}</button>
                 </div>
             }
 

frontend/src/app/features/rules/pages/simulator/rule-transition.component.html

@@ -1,6 +1,5 @@
-
 @if (text) {
-    <sqx-history-step small="true" [isLast]="isLast && filteredErrors.length === 0">
+    <sqx-history-step [isLast]="isLast && filteredErrors.length === 0" small="true">
         <ng-container summary>
             <div class="col text-sm truncate">
                 {{ text | sqxTranslate }}
@@ -10,7 +9,7 @@
 }
 
 @for (error of filteredErrors; track error; let last = $last) {
-    <sqx-history-step small="true" [isLast]="isLast && last">
+    <sqx-history-step [isLast]="isLast && last" small="true">
         <ng-container summary>
             <div class="col text-sm text-danger truncate">
                 {{ error | sqxTranslate }}

frontend/src/app/features/rules/pages/simulator/simulated-rule-event.component.html

@@ -71,7 +71,7 @@
                             text="i18n:rules.simulation.eventConditionEvaluated" />
 
                         @if (event.flowState) {
-                            <sqx-state-details [availableSteps]="availableSteps" showEvent="false" [state]="event.flowState" [branchItems]="branchItems" />
+                            <sqx-state-details [availableSteps]="availableSteps" [branchItems]="branchItems" showEvent="false" [state]="event.flowState" />
                         }
                     }
                 }

frontend/src/app/features/rules/shared/state-attempt.component.html

@@ -2,19 +2,19 @@
     @if (attempt) {
         <div class="row g-0">
             <div class="col">
-                <label>{{ "common.started" | sqxTranslate }}:&nbsp;</label> <span class="text-sm">{{ attempt.started.toISOString() || '-' }}</span>
+                <label>{{ "common.started" | sqxTranslate }}:&nbsp;</label> <span class="text-sm">{{ attempt.started.toISOString() || "-" }}</span>
             </div>
-    
+
             <div class="col">
-                <label>{{ "common.completed" | sqxTranslate }}:&nbsp;</label> <span class="text-sm">{{ attempt.completed.toISOString() || '-' }}</span>
+                <label>{{ "common.completed" | sqxTranslate }}:&nbsp;</label> <span class="text-sm">{{ attempt.completed.toISOString() || "-" }}</span>
             </div>
         </div>
-    
+
         @if (attempt.error) {
             <label class="mt-3">{{ "common.error" | sqxTranslate }}</label>
             <sqx-code-editor disabled="true" height="auto" mode="ace/mode/text" [ngModel]="attempt.error" wordWrap="true" />
         }
-    
+
         @if (output) {
             <label class="mt-3">{{ "common.output" | sqxTranslate }}</label>
             <sqx-code-editor disabled="true" height="auto" mode="ace/mode/text" [ngModel]="output" wordWrap="true" />

frontend/src/app/features/rules/shared/state-details.component.html

@@ -19,6 +19,6 @@
         [isLast]="$last"
         [isNext]="state.nextStepId === item.id"
         [state]="state.steps[item.id]"
-        [stepInfo]="availableSteps[item.step.step.stepType]"
+        [stepDefinition]="state.definition.steps[item.id].step"
-        [stepDefinition]="state.definition.steps[item.id].step" />
+        [stepInfo]="availableSteps[item.step.step.stepType]" />
 }

frontend/src/app/features/rules/shared/state-step.component.html

@@ -21,7 +21,7 @@
         <ul class="nav nav-tabs2 mt-2">
             @if (stepInfo.properties.length > 0) {
                 <li class="nav-item">
-                    <button class="nav-link" [class.active]="attemptIndex === -1" (click)="selectAttempt(-1)">
+                    <button class="nav-link" [class.active]="attemptIndex === -1" (click)="selectAttempt(-1)" type="button">
                         {{ "common.properties" | sqxTranslate }}
                     </button>
                 </li>
@@ -29,7 +29,7 @@
             @if (state) {
                 @for (attempt of state.attempts; let i = $index; track i) {
                     <li class="nav-item">
-                        <button class="nav-link" [class.active]="attemptIndex === i" (click)="selectAttempt(i)">
+                        <button class="nav-link" [class.active]="attemptIndex === i" (click)="selectAttempt(i)" type="button">
                             @if ($first) {
                                 {{ "rules.ruleEvents.attempt" | sqxTranslate }}&nbsp;
                             }

frontend/src/app/features/schemas/pages/schema/common/schema-edit-form.component.html

@@ -6,37 +6,43 @@
             <sqx-form-row for="name" label="common.name" vertical>
                 <input class="form-control" id="name" [ngModel]="schema.name" [ngModelOptions]="{ standalone: true }" readonly />
             </sqx-form-row>
-            
+
-            <sqx-form-row for="label" label="common.label" vertical hint="schemas.schemaLabelHint">
+            <sqx-form-row for="label" hint="schemas.schemaLabelHint" label="common.label" vertical>
                 <input class="form-control" id="label" formControlName="label" />
             </sqx-form-row>
 
-            <sqx-form-row for="hints" label="common.hints" vertical hint="schemas.schemaHintsHint">
+            <sqx-form-row for="hints" hint="schemas.schemaHintsHint" label="common.hints" vertical>
                 <textarea class="form-control" id="hints" formControlName="hints" rows="4"></textarea>
             </sqx-form-row>
 
-            <sqx-form-row for="contentsSidebarUrl" label="schemas.contentsSidebarUrl" vertical hint="schemas.contentsSidebarUrlHint">
+            <sqx-form-row for="contentsSidebarUrl" hint="schemas.contentsSidebarUrlHint" label="schemas.contentsSidebarUrl" vertical>
                 <input class="form-control" id="contentsSidebarUrl" formControlName="contentsSidebarUrl" type="url" />
             </sqx-form-row>
 
-            <sqx-form-row for="contentSidebarUrl" label="schemas.contentSidebarUrl" vertical hint="schemas.contentSidebarUrlHint">
+            <sqx-form-row for="contentSidebarUrl" hint="schemas.contentSidebarUrlHint" label="schemas.contentSidebarUrl" vertical>
                 <input class="form-control" id="contentSidebarUrl" formControlName="contentSidebarUrl" type="url" />
             </sqx-form-row>
 
-            <sqx-form-row for="contentEditorUrl" label="schemas.contentEditorUrl" vertical hint="schemas.contentEditorUrlHint">
+            <sqx-form-row for="contentEditorUrl" hint="schemas.contentEditorUrlHint" label="schemas.contentEditorUrl" vertical>
                 <input class="form-control" id="contentEditorUrl" formControlName="contentEditorUrl" type="url" />
             </sqx-form-row>
 
-            <sqx-form-row for="contentsListUrl" label="schemas.contentsListUrl" vertical hint="schemas.contentsListUrlHint">
+            <sqx-form-row for="contentsListUrl" hint="schemas.contentsListUrlHint" label="schemas.contentsListUrl" vertical>
                 <input class="form-control" id="contentsListUrl" formControlName="contentsListUrl" type="url" />
             </sqx-form-row>
 
-            <sqx-form-row for="tags" label="common.tags" vertical hint="schemas.schemaTagsHint">
+            <sqx-form-row for="tags" hint="schemas.schemaTagsHint" label="common.tags" vertical>
                 <sqx-tag-editor id="tags" formControlName="tags" />
             </sqx-form-row>
 
-            <sqx-form-row for="validateOnPublish" label="schemas.validateOnPublish" check vertical hint="schemas.validateOnPublishHint" alert="schemas.validateOnPublishHint">
+            <sqx-form-row
-                    <input class="form-check-input" id="validateOnPublish" formControlName="validateOnPublish" type="checkbox" />
+                alert="schemas.validateOnPublishHint"
+                check
+                for="validateOnPublish"
+                hint="schemas.validateOnPublishHint"
+                label="schemas.validateOnPublish"
+                vertical>
+                <input class="form-check-input" id="validateOnPublish" formControlName="validateOnPublish" type="checkbox" />
             </sqx-form-row>
         </div>
 

frontend/src/app/features/schemas/pages/schema/fields/field-wizard.component.html

@@ -74,7 +74,7 @@
         @if (!editForm) {
             <div>
                 <div class="btn-group ms-2" attr.aria-label="{{ 'schemas.addField' | sqxTranslate }}" role="group">
-                    <button class="btn btn-success" (click)="addField('Close')" shortcut="CTRL + SHIFT + S">
+                    <button class="btn btn-success" (click)="addField('Close')" shortcut="CTRL + SHIFT + S" type="button">
                         {{ "schemas.addFieldAndClose" | sqxTranslate }}
                     </button>
                     <button
@@ -86,8 +86,8 @@
                         <i class="icon-angle-down"></i>
                     </button>
                     <sqx-dropdown-menu position="top-end" scrollY="true" [sqxAnchoredTo]="buttonSave" *sqxModal="addFieldModal; closeAlways: true">
-                        <button class="dropdown-item" (click)="addField('Add')">{{ "schemas.addFieldAndCreate" | sqxTranslate }}</button>
+                        <button class="dropdown-item" (click)="addField('Add')" type="button">{{ "schemas.addFieldAndCreate" | sqxTranslate }}</button>
-                        <button class="dropdown-item" (click)="addField('Edit')">{{ "schemas.addFieldAndEdit" | sqxTranslate }}</button>
+                        <button class="dropdown-item" (click)="addField('Edit')" type="button">{{ "schemas.addFieldAndEdit" | sqxTranslate }}</button>
                     </sqx-dropdown-menu>
                 </div>
             </div>
@@ -96,7 +96,7 @@
         @if (editForm) {
             <div>
                 <div class="btn-group ms-2" attr.aria-label="{{ 'schemas.saveField' | sqxTranslate }}" role="group">
-                    <button class="btn btn-primary" (click)="save('Close')" shortcut="CTRL + SHIFT + S">
+                    <button class="btn btn-primary" (click)="save('Close')" shortcut="CTRL + SHIFT + S" type="button">
                         {{ "schemas.saveFieldAndClose" | sqxTranslate }}
                     </button>
                     <button
@@ -108,7 +108,7 @@
                         <i class="icon-angle-down"></i>
                     </button>
                     <sqx-dropdown-menu position="bottom-end" scrollY="true" [sqxAnchoredTo]="buttonSave" *sqxModal="addFieldModal; closeAlways: true">
-                        <button class="dropdown-item" (click)="save('Add')">{{ "schemas.saveFieldAndNew" | sqxTranslate }}</button>
+                        <button class="dropdown-item" (click)="save('Add')" type="button">{{ "schemas.saveFieldAndNew" | sqxTranslate }}</button>
                     </sqx-dropdown-menu>
                 </div>
             </div>

frontend/src/app/features/schemas/pages/schema/fields/field.component.html

@@ -56,19 +56,19 @@
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                         @if (field.properties.isContentField) {
                             @if (field.canEnable) {
-                                <button class="dropdown-item" (click)="enableField()">{{ "schemas.field.enable" | sqxTranslate }}</button>
+                                <button class="dropdown-item" (click)="enableField()" type="button">{{ "schemas.field.enable" | sqxTranslate }}</button>
                             }
 
                             @if (field.canDisable) {
-                                <button class="dropdown-item" (click)="disableField()">{{ "schemas.field.disable" | sqxTranslate }}</button>
+                                <button class="dropdown-item" (click)="disableField()" type="button">{{ "schemas.field.disable" | sqxTranslate }}</button>
                             }
 
                             @if (field.canHide) {
-                                <button class="dropdown-item" (click)="hideField()">{{ "schemas.field.hide" | sqxTranslate }}</button>
+                                <button class="dropdown-item" (click)="hideField()" type="button">{{ "schemas.field.hide" | sqxTranslate }}</button>
                             }
 
                             @if (field.canShow) {
-                                <button class="dropdown-item" (click)="showField()">{{ "schemas.field.show" | sqxTranslate }}</button>
+                                <button class="dropdown-item" (click)="showField()" type="button">{{ "schemas.field.show" | sqxTranslate }}</button>
                             }
                         }
 
@@ -79,7 +79,8 @@
                                 confirmRememberKey="lockField"
                                 confirmText="i18n:schemas.field.lockConfirmText"
                                 confirmTitle="i18n:schemas.field.lockConfirmTitle"
-                                (sqxConfirmClick)="lockField()">
+                                (sqxConfirmClick)="lockField()"
+                                type="button">
                                 {{ "schemas.field.lock" | sqxTranslate }}
                             </button>
                         }
@@ -91,7 +92,8 @@
                                 confirmRememberKey="deleteField"
                                 confirmText="i18n:schemas.field.deleteConfirmText"
                                 confirmTitle="i18n:schemas.field.deleteConfirmTitle"
-                                (sqxConfirmClick)="deleteField()">
+                                (sqxConfirmClick)="deleteField()"
+                                type="button">
                                 {{ "common.delete" | sqxTranslate }}
                             </button>
                         </ng-container>

frontend/src/app/features/schemas/pages/schema/fields/forms/field-form.component.html

@@ -1,25 +1,27 @@
 <div class="table-items-row-details-tabs clearfix">
     <ul class="nav nav-tabs2">
         <li class="nav-item">
-            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)" type="button">
                 {{ "schemas.field.tabCommon" | sqxTranslate }}
             </button>
         </li>
 
         <li class="nav-item" [class.hidden]="!field.properties.isContentField">
-            <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+            <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)" type="button">
                 {{ "schemas.field.tabValidation" | sqxTranslate }}
             </button>
         </li>
 
         <li class="nav-item" [class.hidden]="!field.properties.isContentField">
-            <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
+            <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)" type="button">
                 {{ "schemas.field.tabEditing" | sqxTranslate }}
             </button>
         </li>
 
         <li class="nav-item" [class.hidden]="field.properties.fieldType !== 'Json'">
-            <button class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)">{{ "schemas.field.tabMore" | sqxTranslate }}</button>
+            <button class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)" type="button">
+                {{ "schemas.field.tabMore" | sqxTranslate }}
+            </button>
         </li>
     </ul>
 

frontend/src/app/features/schemas/pages/schema/fields/types/rich-text-ui.component.html

@@ -1,5 +1,10 @@
 <div [formGroup]="fieldForm">
-    <sqx-form-row #classNamesRow for="classNames" hint="schemas.fieldTypes.string.classNamesHint" label="schemas.fieldTypes.string.classNames" [prefix]="field.fieldId">
+    <sqx-form-row
+        #classNamesRow
+        for="classNames"
+        hint="schemas.fieldTypes.string.classNamesHint"
+        label="schemas.fieldTypes.string.classNames"
+        [prefix]="field.fieldId">
         <sqx-tag-editor [id]="classNamesRow.fieldName" formControlName="classNames" />
     </sqx-form-row>
 

frontend/src/app/features/schemas/pages/schema/schema-page.component.html

@@ -76,7 +76,7 @@
             <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="editOptionsDropdown; closeAlways: true">
                 @if (schemasState.canCreate) {
                     <div class="dropdown-divider"></div>
-                    <button class="dropdown-item" (click)="cloneSchema()">{{ "common.clone" | sqxTranslate }}</button>
+                    <button class="dropdown-item" (click)="cloneSchema()" type="button">{{ "common.clone" | sqxTranslate }}</button>
                 }
                 <ng-container>
                     <div class="dropdown-divider"></div>
@@ -86,7 +86,8 @@
                         confirmRememberKey="deleteSchema"
                         confirmText="i18n:schemas.deleteConfirmText"
                         confirmTitle="i18n:schemas.deleteConfirmTitle"
-                        (sqxConfirmClick)="deleteSchema()">
+                        (sqxConfirmClick)="deleteSchema()"
+                        type="button">
                         {{ "common.delete" | sqxTranslate }}
                     </button>
                 </ng-container>

frontend/src/app/features/schemas/pages/schema/scripts/schema-scripts-form.component.html

@@ -3,7 +3,7 @@
         <ul class="nav nav-tabs2">
             @for (script of editForm.form.controls | sqxKeys; track script) {
                 <li class="nav-item">
-                    <button class="nav-link" [class.active]="schemaScript === script" (click)="selectField(script)">
+                    <button class="nav-link" [class.active]="schemaScript === script" (click)="selectField(script)" type="button">
                         {{ script | sqxScriptName }}
                     </button>
                 </li>

frontend/src/app/features/schemas/pages/schema/ui/schema-ui-form.component.html

@@ -2,13 +2,13 @@
     <div class="inner-header">
         <ul class="nav nav-tabs2">
             <li class="nav-item">
-                <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)" type="button">
                     {{ "schemas.listFields" | sqxTranslate }} <small>({{ fieldsInLists.length }})</small>
                 </button>
             </li>
 
             <li class="nav-item">
-                <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)" type="button">
                     {{ "schemas.referenceFields" | sqxTranslate }} <small>({{ fieldsInReferences.length }})</small>
                 </button>
             </li>

frontend/src/app/features/schemas/pages/schemas/schema-form.component.html

@@ -12,20 +12,20 @@
                 <div class="col">
                     <ul class="nav nav-tabs2">
                         <li class="nav-item">
-                            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)" type="button">
                                 {{ "schemas.createCustom" | sqxTranslate }}
                             </button>
                         </li>
 
                         <li class="nav-item">
-                            <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                            <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)" type="button">
                                 {{ "schemas.createFromJson" | sqxTranslate }}
                             </button>
                         </li>
 
                         @if (hasChatBot) {
                             <li class="nav-item">
-                                <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
+                                <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)" type="button">
                                     {{ "schemas.createAI" | sqxTranslate }}
                                     <span class="badge rounded-pill badge-primary">New</span>
                                 </button>
@@ -143,7 +143,7 @@
                         </div>
                     </div>
                 </sqx-form-row>
-                
+
                 <sqx-form-alert> {{ "schemas.promptExample" | sqxTranslate }} </sqx-form-alert>
 
                 <sqx-code-editor disabled="true" [height]="1000" [ngModel]="generateLog" [ngModelOptions]="{ standalone: true }" />

frontend/src/app/features/settings/pages/asset-scripts/asset-scripts-page.component.html

@@ -11,7 +11,7 @@
                 <ul class="nav nav-tabs2">
                     @for (script of editForm.form.controls | sqxKeys; track script) {
                         <li class="nav-item">
-                            <button class="nav-link" [class.active]="assetScript === script" (click)="selectField(script)">
+                            <button class="nav-link" [class.active]="assetScript === script" (click)="selectField(script)" type="button">
                                 {{ script | sqxScriptName }}
                             </button>
                         </li>

frontend/src/app/features/settings/pages/clients/client-connect-form.component.html

@@ -11,7 +11,7 @@
                     </li>
                 } @else {
                     <li class="breadcrumb-item done">
-                        <button class="btn-inline-link" (click)="go('Start')">
+                        <button class="btn-inline-link" (click)="go('Start')" type="button">
                             <i class="icon-checkmark"></i> {{ "clients.connectWizard.step1Title" | sqxTranslate }}
                         </button>
                     </li>
@@ -157,7 +157,7 @@
         }
     </ng-container>
     <ng-container footer>
-        <button class="btn btn-text-secondary" (click)="go('Start')" [disabled]="step === 'Start'">
+        <button class="btn btn-text-secondary" (click)="go('Start')" [disabled]="step === 'Start'" type="button">
             {{ "common.back" | sqxTranslate }}
         </button>
     </ng-container>

frontend/src/app/features/settings/pages/clients/client.component.html

@@ -93,7 +93,7 @@
 
                     @if (client.canUpdate) {
                         <div class="col-auto">
-                            <button class="btn btn-outline-secondary" (click)="updateApiCallsLimit(apiCallsLimit)">
+                            <button class="btn btn-outline-secondary" (click)="updateApiCallsLimit(apiCallsLimit)" type="button">
                                 {{ "common.save" | sqxTranslate }}
                             </button>
                         </div>

frontend/src/app/features/settings/pages/more/more-page.component.html

@@ -48,7 +48,11 @@
                                         <div>
                                             <sqx-avatar [identifier]="app.name" [image]="app.image" size="150" />
                                             @if (isEditableImage && app.image) {
-                                                <button class="btn btn-danger btn-sm app-image-remove" (click)="removeImage()" title="i18n:apps.removeImage">
+                                                <button
+                                                    class="btn btn-danger btn-sm app-image-remove"
+                                                    (click)="removeImage()"
+                                                    title="i18n:apps.removeImage"
+                                                    type="button">
                                                     <i class="icon-bin2"></i>
                                                 </button>
                                             }

frontend/src/app/features/settings/pages/plans/plan.component.html

@@ -22,7 +22,7 @@
         </div>
 
         @if (planInfo.isSelected) {
-            <button class="btn btn-block btn-text-success plan-selected">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
+            <button class="btn btn-block btn-text-success plan-selected" type="button">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
         }
 
         @if (!planInfo.isSelected) {
@@ -33,7 +33,8 @@
                 [confirmText]="planInfo.plan.confirmText"
                 confirmTitle="i18n:plans.changeConfirmTitle"
                 [disabled]="(plansState.locked | async) !== 'None'"
-                (sqxConfirmClick)="changeMonthly()">
+                (sqxConfirmClick)="changeMonthly()"
+                type="button">
                 {{ "plans.change" | sqxTranslate }}
             </button>
         }
@@ -47,7 +48,7 @@
             </div>
 
             @if (planInfo.isYearlySelected) {
-                <button class="btn btn-block btn-text-success plan-selected">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
+                <button class="btn btn-block btn-text-success plan-selected" type="button">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
             }
 
             @if (!planInfo.isYearlySelected) {
@@ -57,7 +58,8 @@
                     [confirmText]="planInfo.plan.yearlyConfirmText!"
                     confirmTitle="i18n:plans.changeConfirmTitle"
                     [disabled]="(plansState.locked | async) !== 'None'"
-                    (sqxConfirmClick)="changeYearly()">
+                    (sqxConfirmClick)="changeYearly()"
+                    type="button">
                     {{ "plans.change" | sqxTranslate }}
                 </button>
             }

frontend/src/app/features/settings/pages/workflows/workflow-step.component.html

@@ -6,7 +6,8 @@
                 [class.active]="step.name === workflow.dto.initial"
                 [class.enabled]="step.name !== workflow.dto.initial && !step.isLocked"
                 (click)="makeInitial()"
-                [disabled]="step.name === workflow.dto.initial || step.isLocked || disabled">
+                [disabled]="step.name === workflow.dto.initial || step.isLocked || disabled"
+                type="button">
                 @if (!step.isLocked) {
                     <i class="icon-arrow-right text-decent"></i>
                 }
@@ -69,7 +70,7 @@
                 </div>
 
                 <div class="col ps-2">
-                    <button class="btn btn-outline-secondary" (click)="addTransition(openStep.name)"><i class="icon-plus"></i></button>
+                    <button class="btn btn-outline-secondary" (click)="addTransition(openStep.name)" type="button"><i class="icon-plus"></i></button>
                 </div>
             </div>
         }

frontend/src/app/features/settings/pages/workflows/workflow.component.html

@@ -37,13 +37,13 @@
             <div class="table-items-row-details-tabs clearfix">
                 <ul class="nav nav-tabs2">
                     <li class="nav-item">
-                        <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                        <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)" type="button">
                             {{ "workflows.tabEdit" | sqxTranslate }}
                         </button>
                     </li>
 
                     <li class="nav-item">
-                        <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                        <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)" type="button">
                             {{ "workflows.tabVisualize" | sqxTranslate }}
                         </button>
                     </li>
@@ -94,7 +94,7 @@
                     }
 
                     @if (workflowView.dto.canUpdate) {
-                        <button class="btn btn-success" (click)="addStep()">{{ "workflows.addStep" | sqxTranslate }}</button>
+                        <button class="btn btn-success" (click)="addStep()" type="button">{{ "workflows.addStep" | sqxTranslate }}</button>
                     }
                 } @else {
                     <sqx-workflow-diagram [workflow]="workflowView" />

frontend/src/app/features/teams/pages/contributors/contributor-add-form.component.html

@@ -30,7 +30,7 @@
     <div class="import-hint">
         <sqx-form-hint>
             {{ "contributors.importHint" | sqxTranslate }}
-            <button class="btn-inline-link" (click)="importDialog.show()">{{ "contributors.importButton" | sqxTranslate }}</button>
+            <button class="btn-inline-link" (click)="importDialog.show()" type="button">{{ "contributors.importButton" | sqxTranslate }}</button>
         </sqx-form-hint>
     </div>
 </div>

frontend/src/app/features/teams/pages/plans/plan.component.html

@@ -22,7 +22,7 @@
         </div>
 
         @if (planInfo.isSelected) {
-            <button class="btn btn-block btn-text-success plan-selected">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
+            <button class="btn btn-block btn-text-success plan-selected" type="button">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
         }
 
         @if (!planInfo.isSelected) {
@@ -33,7 +33,8 @@
                 [confirmText]="planInfo.plan.confirmText"
                 confirmTitle="i18n:plans.changeConfirmTitle"
                 [disabled]="(plansState.locked | async) !== 'None'"
-                (sqxConfirmClick)="changeMonthly()">
+                (sqxConfirmClick)="changeMonthly()"
+                type="button">
                 {{ "plans.change" | sqxTranslate }}
             </button>
         }
@@ -47,7 +48,7 @@
             </div>
 
             @if (planInfo.isYearlySelected) {
-                <button class="btn btn-block btn-text-success plan-selected">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
+                <button class="btn btn-block btn-text-success plan-selected" type="button">&#10003; {{ "plans.selected" | sqxTranslate }}</button>
             }
 
             @if (!planInfo.isYearlySelected) {
@@ -57,7 +58,8 @@
                     [confirmText]="planInfo.plan.yearlyConfirmText!"
                     confirmTitle="i18n:plans.changeConfirmTitle"
                     [disabled]="(plansState.locked | async) !== 'None'"
-                    (sqxConfirmClick)="changeYearly()">
+                    (sqxConfirmClick)="changeYearly()"
+                    type="button">
                     {{ "plans.change" | sqxTranslate }}
                 </button>
             }

frontend/src/app/framework/angular/layout.component.html

@@ -25,7 +25,7 @@
                             <i class="icon-close"></i>
                         </a>
                     } @else {
-                        <button class="btn panel2-collapse"><i class="icon-close"></i></button>
+                        <button class="btn panel2-collapse" type="button"><i class="icon-close"></i></button>
                     }
                 </div>
             }
@@ -63,7 +63,12 @@
                             <ng-container *ngTemplateOutlet="menuTemplate"></ng-container>
                         </div>
                     </div>
-                    <button class="btn panel2-collapse" attr.aria-label="{{ 'common.togglePanel' | sqxTranslate }}" (click)="toggle()" sqxStopClick>
+                    <button
+                        class="btn panel2-collapse"
+                        attr.aria-label="{{ 'common.togglePanel' | sqxTranslate }}"
+                        (click)="toggle()"
+                        sqxStopClick
+                        type="button">
                         @if (displayMode === "Collapsed" && expandedWidth > 0) {
                             <i class="icon-angle-right"></i>
                         } @else if (displayMode === "Collapsed") {

frontend/src/app/framework/angular/menu-item.component.html

@@ -7,7 +7,8 @@
         [confirmText]="confirmText | sqxTranslate"
         [confirmTitle]="confirmTitle | sqxTranslate"
         (sqxConfirmClick)="action.emit()"
-        [title]="tooltip | sqxTranslate">
+        [title]="tooltip | sqxTranslate"
+        type="button">
         {{ menuLabel || label | sqxTranslate }}
     </button>
 </ng-template>
@@ -21,7 +22,8 @@
     [disabled]="disabled"
     (sqxConfirmClick)="action.emit()"
     [tabIndex]="tabIndex"
-    [title]="tooltip | sqxTranslate">
+    [title]="tooltip | sqxTranslate"
+    type="button">
     @if (icon) {
         <i class="icon-{{ icon }}"></i>
     }

frontend/src/app/framework/angular/menu.component.html

@@ -23,7 +23,13 @@
         </sqx-dropdown-menu>
     }
 
-    <div class="d-flex flex-nowrap" #menu [class.gap-1]="small" [class.gap-2]="!small" [class.overflown-right]="!!overflowMenuItems && isRightAligned" [class.overflown-left]="!!overflowMenuItems && !isRightAligned">
+    <div
+        class="d-flex flex-nowrap"
+        #menu
+        [class.gap-1]="small"
+        [class.gap-2]="!small"
+        [class.overflown-left]="!!overflowMenuItems && !isRightAligned"
+        [class.overflown-right]="!!overflowMenuItems && isRightAligned">
         <ng-content />
     </div>
 </div>

frontend/src/app/framework/angular/modals/dialog-renderer.component.html

@@ -22,7 +22,12 @@
 
 <div class="notification-container notification-container-bottom-right">
     @for (notification of snapshot.notifications; track notification) {
-        <div class="alert alert-light alert-dismissible border shadow-sm timed" animate.enter="fade-in" animate.leave="fade-out" (click)="close(notification)" role="alert">
+        <div
+            class="alert alert-light alert-dismissible border shadow-sm timed"
+            animate.enter="fade-in"
+            animate.leave="fade-out"
+            (click)="close(notification)"
+            role="alert">
             <button class="btn-sm btn-close" data-dismiss="alert" (dialogClose)="close(notification)" type="button"></button>
             <div class="timer timer-{{ notification.messageType }}"></div>
             <div [sqxMarkdown]="notification.message | sqxTranslate"></div>

frontend/src/app/framework/angular/modals/modal-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal" animate.enter="fade-in" animate.leave="fade-out" data-testid="dialog" cdkTrapFocus>
+<div class="modal" animate.enter="fade-in" animate.leave="fade-out" cdkTrapFocus data-testid="dialog">
     <div class="modal-dialog modal-{{ size }}" [class.modal-fh]="fullHeight">
         <div class="modal-content" [sqxTourStep]="tourId">
             @if (showHeader) {

frontend/src/app/framework/angular/modals/tour-template.component.html

@@ -1,6 +1,7 @@
 <div
     class="tour-step"
-    animate.enter="fade-in" animate.leave="fade-out"
+    animate.enter="fade-in"
+    animate.leave="fade-out"
     [class.d-none]="!isVisible"
     offset="4"
     [position]="currentStep.position || 'bottom-start'"
@@ -31,13 +32,13 @@
             <div class="d-flex justify-content-between">
                 <div class="d-flex pe-4">
                     @if (hasPrev) {
-                        <button class="btn btn-outline-secondary btn-sm me-2" (click)="tourService.prev()">
+                        <button class="btn btn-outline-secondary btn-sm me-2" (click)="tourService.prev()" type="button">
                             {{ "common.prev" | sqxTranslate }}
                         </button>
                     }
 
                     @if (currentStep.hideAll) {
-                        <button class="btn btn-outline-danger btn-sm" (click)="currentStep.hideAll()">
+                        <button class="btn btn-outline-danger btn-sm" (click)="currentStep.hideAll()" type="button">
                             {{ "tour.tooltipStop" | sqxTranslate }}
                         </button>
                     }
@@ -45,19 +46,19 @@
 
                 <div class="d-flex ps-4">
                     @if (hasNext) {
-                        <button class="btn btn-outline-secondary btn-sm" (click)="tourService.next()">
+                        <button class="btn btn-outline-secondary btn-sm" (click)="tourService.next()" type="button">
                             {{ "common.next" | sqxTranslate }}
                         </button>
                     }
 
                     @if (hasFinish) {
-                        <button class="btn btn-outline-success btn-sm" (click)="tourService.end()">
+                        <button class="btn btn-outline-success btn-sm" (click)="tourService.end()" type="button">
                             {{ "common.finish" | sqxTranslate }}
                         </button>
                     }
 
                     @if (currentStep.hideThis) {
-                        <button class="btn btn-outline-success btn-sm" (click)="currentStep.hideThis()">
+                        <button class="btn btn-outline-success btn-sm" (click)="currentStep.hideThis()" type="button">
                             {{ "tour.tooltipConfirm" | sqxTranslate }}
                         </button>
                     }

frontend/src/app/framework/angular/pager.component.html

@@ -14,11 +14,11 @@
                 <span class="page-info d-flex align-items-center justify-content-end">
                     <span class="btn deactivated">&nbsp;</span> &nbsp;
                     @if (paging.count > 0 && paging.total > 0) {
-                        <button class="btn deactivated">{{ "common.pagerInfo" | sqxTranslate: translationInfo }}</button>
+                        <button class="btn deactivated" type="button">{{ "common.pagerInfo" | sqxTranslate: translationInfo }}</button>
                     }
 
                     @if (paging.count > 0 && paging.total <= 0) {
-                        <button class="btn" (click)="loadTotal.emit()" title="{{ 'common.pagerReload' | sqxTranslate }}">
+                        <button class="btn" (click)="loadTotal.emit()" title="{{ 'common.pagerReload' | sqxTranslate }}" type="button">
                             {{ "common.pagerInfoNoTotal" | sqxTranslate: translationInfo }}
                         </button>
                     }

frontend/src/app/shared/components/assets/asset-dialog.component.html

@@ -6,14 +6,14 @@
                 <div class="col">
                     <ul class="nav nav-tabs2">
                         <li class="nav-item">
-                            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)">
+                            <button class="nav-link" [class.active]="selectedTab === 0" (click)="selectTab(0)" type="button">
                                 {{ "assets.tabMetadata" | sqxTranslate }}
                             </button>
                         </li>
 
                         <li class="nav-item">
                             @if (isImage) {
-                                <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)">
+                                <button class="nav-link" [class.active]="selectedTab === 1" (click)="selectTab(1)" type="button">
                                     {{ "assets.tabImage" | sqxTranslate }}
                                 </button>
                             }
@@ -21,7 +21,7 @@
 
                         <li class="nav-item">
                             @if (isImage) {
-                                <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)">
+                                <button class="nav-link" [class.active]="selectedTab === 2" (click)="selectTab(2)" type="button">
                                     {{ "assets.tabFocusPoint" | sqxTranslate }}
                                 </button>
                             }
@@ -29,7 +29,7 @@
 
                         <li class="nav-item">
                             @if (isDocumentLikely) {
-                                <button class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)">
+                                <button class="nav-link" [class.active]="selectedTab === 3" (click)="selectTab(3)" type="button">
                                     {{ "assets.tabTextEditor" | sqxTranslate }}
                                 </button>
                             }
@@ -37,14 +37,14 @@
 
                         <li class="nav-item">
                             @if (isVideo || (asset | sqxPreviewable)) {
-                                <button class="nav-link" [class.active]="selectedTab === 4" (click)="selectTab(4)">
+                                <button class="nav-link" [class.active]="selectedTab === 4" (click)="selectTab(4)" type="button">
                                     {{ "assets.tabPreview" | sqxTranslate }}
                                 </button>
                             }
                         </li>
 
                         <li class="nav-item">
-                            <button class="nav-link" [class.active]="selectedTab === 5" (click)="selectTab(5)">
+                            <button class="nav-link" [class.active]="selectedTab === 5" (click)="selectTab(5)" type="button">
                                 {{ "assets.tabHistory" | sqxTranslate }}
                             </button>
                         </li>
@@ -60,7 +60,13 @@
                         }
 
                         @case (1) {
-                            <button class="btn btn-primary" [class.invisible]="!isUploadable" (click)="cropImage()" [disabled]="progress > 0" type="button">
+                            <button
+                                class="btn btn-primary"
+                                [class.invisible]="!isUploadable"
+                                (click)="cropImage()"
+                                [disabled]="progress > 0"
+                                type="button"
+                                type="button">
                                 {{ "common.upload" | sqxTranslate }}
                             </button>
                         }

frontend/src/app/shared/components/assets/asset-folder.component.html

@@ -17,7 +17,7 @@
                     </button>
                     <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="editDropdown; closeAlways: true">
                         @if (canUpdate) {
-                            <button class="dropdown-item" (click)="editDialog.show()">{{ "common.rename" | sqxTranslate }}</button>
+                            <button class="dropdown-item" (click)="editDialog.show()" type="button">{{ "common.rename" | sqxTranslate }}</button>
                             <div class="dropdown-divider"></div>
                         }
                         <button
@@ -26,7 +26,8 @@
                             confirmRememberKey="deleteAssetFolder"
                             confirmText="i18n:assets.deleteFolderConfirmText"
                             confirmTitle="i18n:assets.deleteFolderConfirmTitle"
-                            (sqxConfirmClick)="emitDelete()">
+                            (sqxConfirmClick)="emitDelete()"
+                            type="button">
                             {{ "common.delete" | sqxTranslate }}
                         </button>
                     </sqx-dropdown-menu>

frontend/src/app/shared/components/assets/asset-path.component.html

@@ -3,7 +3,7 @@
         @if (i > 0) {
             <i class="icon-angle-right"></i>
         }
-        <button class="btn" [class.first]="i === 0" [class.force]="i < path.length - 1 || all" (click)="navigate.emit(item)">
+        <button class="btn" [class.first]="i === 0" [class.force]="i < path.length - 1 || all" (click)="navigate.emit(item)" type="button">
             {{ item.folderName | sqxTranslate }}
         </button>
     } @empty {

frontend/src/app/shared/components/assets/asset.component.html

@@ -25,7 +25,7 @@
 
                         <div class="overlay-menu">
                             @if (!isDisabled) {
-                                <button class="file-edit ms-2" attr.aria-label="{{ 'common.edit' | sqxTranslate }}" (click)="emitEdit()">
+                                <button class="file-edit ms-2" attr.aria-label="{{ 'common.edit' | sqxTranslate }}" (click)="emitEdit()" type="button">
                                     <i class="icon-pencil"></i>
                                 </button>
                             }
@@ -38,7 +38,7 @@
                                 <i class="icon-download"></i>
                             </a>
                             @if (folderIcon) {
-                                <button class="file-folder ms-2" (click)="selectFolder.emit(asset.parentId)"><i class="icon-folder"></i></button>
+                                <button class="file-folder ms-2" (click)="selectFolder.emit(asset.parentId)" type="button"><i class="icon-folder"></i></button>
                             }
 
                             @if (!isDisabled && !removeMode && asset.canDelete) {
@@ -48,7 +48,8 @@
                                     confirmRememberKey="deleteAsset"
                                     confirmText="i18n:assets.deleteConfirmText"
                                     confirmTitle="i18n:assets.deleteConfirmTitle"
-                                    (sqxConfirmClick)="delete.emit()">
+                                    (sqxConfirmClick)="delete.emit()"
+                                    type="button">
                                     <i class="icon-delete"></i>
                                 </button>
                             }
@@ -60,7 +61,8 @@
                                     confirmRememberKey="removeAsset"
                                     confirmText="i18n:assets.removeConfirmText"
                                     confirmTitle="i18n:assets.removeConfirmTitle"
-                                    (sqxConfirmClick)="remove.emit()">
+                                    (sqxConfirmClick)="remove.emit()"
+                                    type="button">
                                     <i class="icon-close"></i>
                                 </button>
                             }

frontend/src/app/shared/components/cards/api-calls-card.component.html

@@ -3,7 +3,7 @@
         {{ "dashboard.apiCallsCard" | sqxTranslate }}
         @if (app) {
             <div class="float-end">
-                <button class="btn-inline-link" (click)="downloadLog(app)">
+                <button class="btn-inline-link" (click)="downloadLog(app)" type="button">
                     <small>{{ "dashboard.downloadLog" | sqxTranslate }}</small>
                 </button>
             </div>

frontend/src/app/shared/components/contents/content-value.component.html

@@ -4,7 +4,7 @@
     </div>
 
     @if (isString && fields) {
-        <button class="btn btn-icon" (click)="toggle()" sqxStopClick><i class="icon-wrap_text"></i></button>
+        <button class="btn btn-icon" (click)="toggle()" sqxStopClick type="button"><i class="icon-wrap_text"></i></button>
     }
 } @else {
     <div

frontend/src/app/shared/components/references/content-selector.component.html

@@ -114,7 +114,7 @@
                 </button>
             }
 
-            <button class="btn btn-success" (click)="emitSelect()" [disabled]="selectionCount === 0 || selectionCount > maxItems" type="submit">
+            <button class="btn btn-success" (click)="emitSelect()" [disabled]="selectionCount === 0 || selectionCount > maxItems" type="button" type="submit">
                 {{ "contents.referencesLink" | sqxTranslate: { count: selectionCount } }}
             </button>
         </div>

frontend/src/app/shared/components/search/query-list.component.html

@@ -2,7 +2,7 @@
     <ul class="nav nav-light flex-column">
         @for (saved of queries; track saved.name) {
             <li class="nav-item">
-                <button class="nav-link" [class.active]="isSelectedQuery(saved)" (click)="search.emit(saved.query)">
+                <button class="nav-link" [class.active]="isSelectedQuery(saved)" (click)="search.emit(saved.query)" type="button">
                     <div class="row g-0">
                         <div class="col truncate">
                             <i class="icon-circle" [class.hidden]="!saved.color" [style.color]="saved.color"></i>
@@ -11,7 +11,7 @@
 
                         <div class="col-auto">
                             @if (canRemove) {
-                                <button class="btn-sm btn-text-danger btn-remove" (click)="remove.emit(saved)" sqxStopClick>
+                                <button class="btn-sm btn-text-danger btn-remove" (click)="remove.emit(saved)" sqxStopClick type="button">
                                     <i class="icon-close"></i>
                                 </button>
                             }

frontend/src/app/shared/components/table-header.component.html

@@ -1,5 +1,5 @@
 @if (sortable) {
-    <button class="btn-inline-link truncate" (click)="sort()">
+    <button class="btn-inline-link truncate" (click)="sort()" type="button">
         <span class="truncate">
             @if (order === "ascending") {
                 <i class="icon-caret-up"></i>

frontend/src/app/shared/components/tour-guide.component.html

@@ -7,7 +7,7 @@
                         <div class="col">{{ "tour.guide-title" | sqxTranslate }}</div>
 
                         <div class="col-auto">
-                            <button class="btn btn-simple btn-sm" (click)="toggle()"><i class="icon-angle-down"></i></button>
+                            <button class="btn btn-simple btn-sm" (click)="toggle()" type="button"><i class="icon-angle-down"></i></button>
                         </div>
                     </div>
                 </div>
@@ -36,7 +36,8 @@
                         class="btn btn-outline-secondary btn-block mt-2"
                         (click)="complete()"
                         [sqxScrollActive]="(tourState.pendingTasks | async) === 0"
-                        [sqxScrollContainer]="body">
+                        [sqxScrollContainer]="body"
+                        type="button">
                         {{ "tour.complete" | sqxTranslate }}
                     </button>
                 </div>

frontend/src/app/shared/model/custom.ts

@@ -586,6 +586,7 @@ export class SchemaDto extends generated.SchemaDto {
     public export(): any {
         const fieldKeys = [
             'fieldId',
+            'cachedValues',
             'parentId',
             'parentFieldId',
             '_links',

frontend/src/app/shared/model/generated.ts

@@ -2383,6 +2383,7 @@ export class SchemaDto extends ResourceDto implements ISchemaDto {
     public export(): any {
         const fieldKeys = [
             'fieldId',
+            'cachedValues',
             'parentId',
             'parentFieldId',
             '_links',

frontend/src/app/shell/pages/internal/profile-menu.component.html

@@ -13,14 +13,18 @@
     <div class="dropdown-divider"></div>
 
     @if (uiState.canUseAdminResource | async) {
-        <button class="dropdown-item" routerLink="/app/administration">{{ "common.administration" | sqxTranslate }}</button>
+        <button class="dropdown-item" routerLink="/app/administration" type="button">{{ "common.administration" | sqxTranslate }}</button>
     }
     <a class="dropdown-item" href="{{ snapshot.profileUrl }}" sqxExternalLink="noicon"> {{ "profile.title" | sqxTranslate }} </a>
     <div class="dropdown-submenu">
-        <button class="dropdown-item dropdown-toggle" (click)="toggleSubmenu()" sqxStopClick>{{ "common.language" | sqxTranslate }}</button>
+        <button class="dropdown-item dropdown-toggle" (click)="toggleSubmenu()" sqxStopClick type="button">{{ "common.language" | sqxTranslate }}</button>
         <div class="dropdown-menu" [class.open]="snapshot.showSubmenu">
             @for (availableLanguage of languages; track availableLanguage) {
-                <button class="dropdown-item" [class.active]="availableLanguage.iso2Code === language" (click)="changeLanguage(availableLanguage.iso2Code)">
+                <button
+                    class="dropdown-item"
+                    [class.active]="availableLanguage.iso2Code === language"
+                    (click)="changeLanguage(availableLanguage.iso2Code)"
+                    type="button">
                     {{ availableLanguage.localName }}
                 </button>
             }
@@ -28,5 +32,5 @@
     </div>
 
     <div class="dropdown-divider"></div>
-    <button class="dropdown-item" (click)="logout()" sqxExternalLink>{{ "common.logout" | sqxTranslate }}</button>
+    <button class="dropdown-item" (click)="logout()" sqxExternalLink type="button">{{ "common.logout" | sqxTranslate }}</button>
 </sqx-dropdown-menu>