Ng update (#1228)

* Fix formatting

* To ng19

* More stuff

* NG Update

* Filter warnings

frontend/.storybook/main.js

@@ -7,6 +7,19 @@
 
 const CopyPlugin = require('copy-webpack-plugin');
 
+class FilterSassWarningsPlugin {
+    apply(compiler) {
+      compiler.hooks.done.tap('FilterSassWarningsPlugin', (stats) => {
+        stats.compilation.warnings = stats.compilation.warnings.filter(
+          (warning) => {
+            const message = warning.message || warning.toString();
+            return !message.includes('sass-loader');
+          }
+        );
+      });
+    }
+  }
+
 module.exports = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
@@ -28,6 +41,7 @@ module.exports = {
         ]
     }));
 
+    config.plugins.push(new FilterSassWarningsPlugin());
     config.resolve?.extensions?.push('.d.ts');
     return config;
   },

frontend/angular.json

@@ -31,6 +31,14 @@
             "allowedCommonJsDependencies": [
               "@tweenjs/tween.js",
               "client-only",
+              "codemirror",
+              "codemirror/addon/comment/comment.js",
+              "codemirror/addon/hint/show-hint.js",
+              "codemirror/addon/fold/brace-fold.js",
+              "codemirror/addon/fold/foldgutter.js",
+              "codemirror/addon/search/jump-to-line.js",
+              "codemirror/addon/search/search.js",
+              "codemirror/mode/javascript/javascript.js",
               "copy-to-clipboard",
               "cropperjs",
               "crypto-js",
@@ -38,18 +46,20 @@
               "crypto-js/enc-base64.js",
               "crypto-js/enc-utf8.js",
               "crypto-js/sha256.js",
+              "get-value",
               "graphql-ws",
               "markdown-it",
               "mersenne-twister",
               "mousetrap",
               "nullthrows",
-              "pikaday",
-              "pikaday/pikaday",
               "progressbar.js",
+              "react-compiler-runtime",
               "react-dom",
               "react",
               "set-value",
-              "slugify"
+              "slugify",
+              "textarea-caret",
+              "use-sync-external-store/with-selector"
             ],
             "assets": [
               "src/app/assets",
@@ -95,7 +105,10 @@
             "stylePreprocessorOptions": {
               "includePaths": [
                 "./src/app/theme"
-              ]
+              ],
+              "sass": {
+                "silenceDeprecations": ["color-functions", "global-builtin", "import"]
+              }
             },
             "scripts": []
           },

frontend/package.json

@@ -15,113 +15,110 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "18.0.1",
-    "@angular/cdk": "18.0.1",
-    "@angular/cdk-experimental": "18.0.1",
-    "@angular/common": "18.0.1",
-    "@angular/core": "18.0.1",
-    "@angular/forms": "18.0.1",
-    "@angular/localize": "18.0.1",
-    "@angular/platform-browser": "18.0.1",
-    "@angular/platform-browser-dynamic": "18.0.1",
-    "@angular/platform-server": "18.0.1",
-    "@angular/router": "18.0.1",
+    "@angular/animations": "19.2.14",
+    "@angular/cdk": "19.2.18",
+    "@angular/cdk-experimental": "19.2.18",
+    "@angular/common": "19.2.14",
+    "@angular/core": "19.2.14",
+    "@angular/forms": "19.2.14",
+    "@angular/localize": "19.2.14",
+    "@angular/platform-browser": "19.2.14",
+    "@angular/platform-browser-dynamic": "19.2.14",
+    "@angular/platform-server": "19.2.14",
+    "@angular/router": "19.2.14",
     "@egjs/hammerjs": "2.0.17",
-    "@floating-ui/dom": "^1.6.5",
-    "@graphiql/toolkit": "^0.9.1",
-    "@iharbeck/ngx-virtual-scroller": "^17.0.2",
-    "@lithiumjs/angular": "^8.0.0",
-    "ace-builds": "^1.34.2",
-    "angular-gridster2": "18.0.1",
-    "bootstrap": "5.2.3",
-    "core-js": "3.37.1",
-    "cropperjs": "2.0.0-alpha.1",
-    "date-fns": "3.6.0",
-    "graphiql": "3.2.2",
-    "graphql": "16.8.1",
-    "graphql-ws": "^5.16.0",
+    "@floating-ui/dom": "^1.7.1",
+    "@graphiql/toolkit": "^0.11.3",
+    "@iharbeck/ngx-virtual-scroller": "^19.0.1",
+    "@lithiumjs/angular": "^8.0.1",
+    "ace-builds": "^1.42.0",
+    "angular-gridster2": "19.0.0",
+    "bootstrap": "5.3.6",
+    "core-js": "3.42.0",
+    "cropperjs": "1.6.2",
+    "date-fns": "4.1.0",
+    "graphiql": "4.1.1",
+    "graphql": "16.11.0",
+    "graphql-ws": "^6.0.5",
     "image-focus": "1.2.1",
     "leaflet": "1.9.4",
-    "leaflet-control-geocoder": "2.4.0",
-    "marked": "12.0.2",
+    "leaflet-control-geocoder": "3.2.0",
+    "marked": "15.0.12",
     "mersenne-twister": "1.1.0",
     "mousetrap": "1.6.5",
-    "ng2-charts": "^6.0.1",
-    "ngx-color-picker": "16.0.0",
+    "ng2-charts": "^8.0.0",
     "ngx-doc-viewer": "15.0.1",
-    "ngx-ui-tour-core": "13.0.0",
-    "oidc-client-ts": "^3.0.1",
-    "pikaday": "1.8.2",
+    "ngx-ui-tour-core": "14.0.0",
+    "oidc-client-ts": "^3.2.1",
     "progressbar.js": "1.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rxjs": "7.8.1",
+    "rxjs": "7.8.2",
     "slugify": "1.6.6",
     "textarea-caret": "github:component/textarea-caret-position",
-    "tslib": "2.6.2",
+    "tslib": "2.8.1",
     "tui-calendar": "^1.15.3",
     "typemoq": "^2.1.0",
-    "video.js": "8.12.0",
+    "video.js": "8.23.3",
     "vis-data": "7.1.9",
-    "vis-network": "9.1.9",
+    "vis-network": "9.1.10",
     "vis-util": "5.0.7",
     "y-protocols": "^1.0.6",
-    "y-websocket": "^2.0.3",
-    "zone.js": "0.14.6"
+    "y-websocket": "^3.0.0",
+    "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1800.2",
-    "@angular-devkit/build-angular": "^18.0.2",
-    "@angular-eslint/builder": "18.0.0",
-    "@angular-eslint/eslint-plugin": "18.0.0",
-    "@angular-eslint/eslint-plugin-template": "18.0.0",
-    "@angular-eslint/schematics": "18.0.0",
-    "@angular-eslint/template-parser": "18.0.0",
-    "@angular/cli": "^18.0.2",
-    "@angular/compiler": "^18.0.1",
-    "@angular/compiler-cli": "^18.0.1",
-    "@angular/elements": "^18.0.1",
-    "@compodoc/compodoc": "^1.1.25",
-    "@storybook/addon-actions": "^8.1.5",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/angular": "^8.1.5",
+    "@angular-devkit/architect": "^0.1902.14",
+    "@angular-devkit/build-angular": "^19.2.14",
+    "@angular-eslint/builder": "19.7.1",
+    "@angular-eslint/eslint-plugin": "19.7.1",
+    "@angular-eslint/eslint-plugin-template": "19.7.1",
+    "@angular-eslint/schematics": "19.7.1",
+    "@angular-eslint/template-parser": "19.7.1",
+    "@angular/cli": "^19.2.14",
+    "@angular/compiler": "^19.2.14",
+    "@angular/compiler-cli": "^19.2.14",
+    "@angular/elements": "^19.2.14",
+    "@compodoc/compodoc": "^1.1.26",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/angular": "^8.6.14",
     "@storybook/testing-library": "^0.2.2",
     "@types/ace": "^0.0.52",
-    "@types/codemirror": "5.60.15",
+    "@types/codemirror": "5.60.16",
     "@types/core-js": "2.5.8",
-    "@types/jasmine": "5.1.4",
-    "@types/marked": "5.0.2",
+    "@types/jasmine": "5.1.8",
     "@types/mersenne-twister": "1.1.7",
     "@types/mousetrap": "1.6.15",
-    "@types/node": "20.12.13",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@types/ws": "8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "copy-webpack-plugin": "^12.0.2",
-    "eslint": "^8.57.0",
+    "@types/node": "22.15.29",
+    "@types/react": "18.3.23",
+    "@types/react-dom": "18.3.7",
+    "@types/ws": "8.18.1",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "copy-webpack-plugin": "^13.0.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "jasmine-core": "~5.1.2",
-    "karma": "~6.4.3",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-storybook": "^0.12.0",
+    "jasmine-core": "~5.7.1",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "3.3.3",
+    "prettier": "3.5.3",
     "squidex-prettier-plugin-organize-attributes": "^1.0.1",
-    "storybook": "^8.1.5",
-    "stylelint": "16.6.1",
-    "stylelint-config-standard": "36.0.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-scss": "6.3.0",
-    "typescript": "5.4.5"
+    "storybook": "^8.6.14",
+    "stylelint": "16.20.0",
+    "stylelint-config-standard": "38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-scss": "6.12.0",
+    "typescript": "5.8.3"
   },
   "overrides": {
     "ng2-charts": {
@@ -129,6 +126,6 @@
     },
     "tui-calendar": {
       "dompurify": "^2.5.8"
-    }    
+    }
   }
 }

frontend/src/app/app.component.ts

@@ -11,7 +11,6 @@ import { RouterOutlet } from '@angular/router';
 import { AnalyticsService, CopyGlobalDirective, DialogRendererComponent, RootViewComponent, TourGuideComponent, TourTemplateComponent, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-app',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html',

frontend/src/app/declarations.d.ts

@@ -5,7 +5,6 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-declare module 'pikaday/pikaday';
 declare module 'progressbar.js';
 
 declare module 'textarea-caret' {

frontend/src/app/features/administration/administration-area.component.ts

@@ -11,7 +11,6 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { LayoutContainerDirective, TitleComponent, TranslatePipe, UIState } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-administration-area',
     styleUrls: ['./administration-area.component.scss'],
     templateUrl: './administration-area.component.html',

frontend/src/app/features/administration/pages/event-consumers/event-consumer.component.ts

@@ -13,7 +13,6 @@ import { EventConsumerDto, TooltipDirective } from '@app/shared';
 import { EventConsumersState } from '../../internal';
 
 @Component({
-    standalone: true,
     selector: '[sqxEventConsumer]',
     styleUrls: ['./event-consumer.component.scss'],
     templateUrl: './event-consumer.component.html',

frontend/src/app/features/administration/pages/event-consumers/event-consumers-page.component.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'mixins';
 @import 'vars';
 

frontend/src/app/features/administration/pages/event-consumers/event-consumers-page.component.ts

@@ -15,7 +15,6 @@ import { EventConsumersState } from '../../internal';
 import { EventConsumerComponent } from './event-consumer.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-event-consumers-page',
     styleUrls: ['./event-consumers-page.component.scss'],
     templateUrl: './event-consumers-page.component.html',

frontend/src/app/features/administration/pages/restore/restore-page.component.ts

@@ -13,7 +13,6 @@ import { timer } from 'rxjs';
 import { AuthService, ControlErrorsComponent, DialogService, ISODatePipe, JobsService, LayoutComponent, ListViewComponent, RestoreForm, SidebarMenuDirective, switchSafe, TitleComponent, TooltipDirective, TourStepDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-restore-page',
     styleUrls: ['./restore-page.component.scss'],
     templateUrl: './restore-page.component.html',

frontend/src/app/features/administration/pages/users/user-page.component.ts

@@ -13,7 +13,6 @@ import { ControlErrorsComponent, FormErrorComponent, LayoutComponent, ShortcutDi
 import { UserDto, UserForm, UsersState } from '../../internal';
 
 @Component({
-    standalone: true,
     selector: 'sqx-user-page',
     styleUrls: ['./user-page.component.scss'],
     templateUrl: './user-page.component.html',

frontend/src/app/features/administration/pages/users/user.component.ts

@@ -14,7 +14,6 @@ import { ConfirmClickDirective, StopClickDirective, TooltipDirective, UserDtoPic
 import { UserDto, UsersState } from '../../internal';
 
 @Component({
-    standalone: true,
     selector: '[sqxUser]',
     styleUrls: ['./user.component.scss'],
     templateUrl: './user.component.html',

frontend/src/app/features/administration/pages/users/users-page.component.ts

@@ -14,7 +14,6 @@ import { UsersState } from '../../internal';
 import { UserComponent } from './user.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-users-page',
     styleUrls: ['./users-page.component.scss'],
     templateUrl: './users-page.component.html',

frontend/src/app/features/api/api-area.component.ts

@@ -10,7 +10,6 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { AppsState, ExternalLinkDirective, LayoutComponent, TitleComponent, TourStepDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-api-area',
     styleUrls: ['./api-area.component.scss'],
     templateUrl: './api-area.component.html',

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

@@ -20,10 +20,6 @@
         .graphiql-sessions {
             border-radius: $border-radius;
         }
-
-        * {
-            box-sizing: content-box;
-        }
     }
 
     .graphiql-logo {

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

@@ -6,16 +6,15 @@
  */
 
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import GraphiQL from 'graphiql';
+import { GraphiQL } from 'graphiql';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { ApiUrlConfig, AppsState, AuthService, ClientDto, ClientsService, ClientsState, DialogModel, FormHintComponent, LayoutComponent, MessageBus, ModalDialogComponent, ModalDirective, QueryExecuted, TitleComponent, TooltipDirective, TourStepDirective, TranslatePipe, Types } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-graphql-page',
     styleUrls: ['./graphql-page.component.scss'],
     templateUrl: './graphql-page.component.html',
@@ -32,7 +31,9 @@ import { ApiUrlConfig, AppsState, AuthService, ClientDto, ClientsService, Client
         TranslatePipe,
     ],
 })
-export class GraphQLPageComponent implements AfterViewInit, OnInit {
+export class GraphQLPageComponent implements AfterViewInit, OnInit, OnDestroy {
+    private reactRoot?: ReactDOM.Root | null;
+
     @ViewChild('graphiQLContainer', { static: false })
     public graphiQLContainer!: ElementRef;
 
@@ -50,6 +51,11 @@ export class GraphQLPageComponent implements AfterViewInit, OnInit {
     ) {
     }
 
+    public ngOnDestroy() {
+        this.reactRoot?.unmount();
+        this.reactRoot = null;
+    }
+
     public ngOnInit() {
         this.clientsReadable = this.appsState.snapshot.selectedApp!.canReadClients;
 
@@ -59,6 +65,7 @@ export class GraphQLPageComponent implements AfterViewInit, OnInit {
     }
 
     public ngAfterViewInit() {
+        this.reactRoot = ReactDOM.createRoot(this.graphiQLContainer.nativeElement);
         this.selectClient(null);
     }
 
@@ -103,12 +110,10 @@ export class GraphQLPageComponent implements AfterViewInit, OnInit {
             subscriptionUrl,
         });
 
-        // eslint-disable-next-line deprecation/deprecation
-        ReactDOM.render(
+        this.reactRoot?.render(
             React.createElement(GraphiQL, {
                 fetcher,
             }),
-            this.graphiQLContainer.nativeElement,
         );
     }
 }

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

@@ -11,7 +11,6 @@ import { RouterLink } from '@angular/router';
 import { AppDto, AvatarComponent, ConfirmClickDirective, DropdownMenuComponent, ModalDirective, ModalModel, ModalPlacementDirective, StopClickDirective, TourStepDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-app',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html',

frontend/src/app/features/apps/pages/apps-page.component.ts

@@ -18,7 +18,6 @@ import { TeamComponent } from './team.component';
 type GroupedApps = { team?: TeamDto; apps: AppDto[] };
 
 @Component({
-    standalone: true,
     selector: 'sqx-apps-page',
     styleUrls: ['./apps-page.component.scss'],
     templateUrl: './apps-page.component.html',

frontend/src/app/features/apps/pages/news-dialog.component.ts

@@ -10,7 +10,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FeatureDto, HelpMarkdownPipe, ModalDialogComponent, TooltipDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-news-dialog',
     styleUrls: ['./news-dialog.component.scss'],
     templateUrl: './news-dialog.component.html',

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

@@ -11,7 +11,6 @@ import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { fadeAnimation, MarkdownDirective, ModalDialogComponent, slideAnimation, TourState, TranslatePipe, UsersService } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-onboarding-dialog',
     styleUrls: ['./onboarding-dialog.component.scss'],
     templateUrl: './onboarding-dialog.component.html',

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

@@ -10,7 +10,6 @@ import { RouterLink } from '@angular/router';
 import { ConfirmClickDirective, DropdownMenuComponent, ModalDirective, ModalModel, ModalPlacementDirective, StopClickDirective, TeamDto, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-team',
     styleUrls: ['./team.component.scss'],
     templateUrl: './team.component.html',

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

@@ -12,7 +12,6 @@ import { ControlErrorsComponent, FocusOnInitDirective, FormErrorComponent, Modal
 import { AssetsState, RenameAssetTagForm } from '@app/shared/internal';
 
 @Component({
-    standalone: true,
     selector: 'sqx-asset-tag-dialog',
     styleUrls: ['./asset-tag-dialog.component.scss'],
     templateUrl: './asset-tag-dialog.component.html',

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

@@ -5,15 +5,14 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
+/* eslint-disable @angular-eslint/no-output-native */
 /* eslint-disable @typescript-eslint/no-unnecessary-boolean-literal-compare */
 
-
 import { booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { DialogModel, ModalDirective, StopClickDirective, TagItem, TagsSelected, TranslatePipe } from '@app/shared';
 import { AssetTagDialogComponent } from './asset-tag-dialog.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-asset-tags',
     styleUrls: ['./asset-tags.component.scss'],
     templateUrl: './asset-tags.component.html',

frontend/src/app/features/assets/pages/assets-filters-page.component.ts

@@ -11,7 +11,6 @@ import { AssetsState, LayoutComponent, Queries, Query, SavedQueriesComponent, Tr
 import { AssetTagsComponent } from './asset-tags.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-assets-filters-page',
     styleUrls: ['./assets-filters-page.component.scss'],
     templateUrl: './assets-filters-page.component.html',

frontend/src/app/features/assets/pages/assets-page.component.ts

@@ -12,7 +12,6 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { AssetDialogComponent, AssetDto, AssetFolderDialogComponent, AssetPathComponent, AssetsListComponent, AssetsState, DialogModel, LayoutComponent, ListViewComponent, LocalStoreService, MathHelper, ModalDirective, PagerComponent, Queries, Query, QueryFullTextSynchronizer, Router2State, SearchFormComponent, Settings, ShortcutDirective, SidebarMenuDirective, TagEditorComponent, TitleComponent, TooltipDirective, TourStepDirective, TranslatePipe, UIState } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-assets-page',
     styleUrls: ['./assets-page.component.scss'],
     templateUrl: './assets-page.component.html',

frontend/src/app/features/content/pages/calendar/calendar-page.component.ts

@@ -16,7 +16,6 @@ declare const tui: any;
 type ViewMode = 'day' | 'week' | 'month';
 
 @Component({
-    standalone: true,
     selector: 'sqx-calendar-page',
     styleUrls: ['./calendar-page.component.scss'],
     templateUrl: './calendar-page.component.html',

frontend/src/app/features/content/pages/comments/comments-page.component.ts

@@ -12,7 +12,6 @@ import { map } from 'rxjs/operators';
 import { CommentsComponent, LayoutComponent } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-comments-page',
     styleUrls: ['./comments-page.component.scss'],
     templateUrl: './comments-page.component.html',

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

@@ -10,7 +10,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { ContentDto, FromNowPipe, HistoryEventDto, HistoryMessagePipe, TooltipDirective, TranslatePipe, TypedSimpleChanges, UserNameRefPipe, UserPictureRefPipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-event',
     styleUrls: ['./content-event.component.scss'],
     templateUrl: './content-event.component.html',

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

@@ -15,7 +15,6 @@ import { ContentEventComponent } from './content-event.component';
 import { ContentPageComponent } from './content-page.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-history',
     styleUrls: ['./content-history-page.component.scss'],
     templateUrl: './content-history-page.component.html',

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

@@ -21,7 +21,6 @@ import { ContentReferencesComponent } from './references/content-references.comp
 type SaveNavigationMode = 'Close' | 'Add' | 'Edit';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-page',
     styleUrls: ['./content-page.component.scss'],
     templateUrl: './content-page.component.html',

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

@@ -12,7 +12,6 @@ import { AppLanguageDto, CursorsComponent, CursorsDirective, EditContentForm, Fo
 import { ContentSectionComponent } from '../../../shared/forms/content-section.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-editor',
     styleUrls: ['./content-editor.component.scss'],
     templateUrl: './content-editor.component.html',

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

@@ -15,7 +15,6 @@ import { AppLanguageDto, CodeEditorComponent, ContentDto, ContentsService, Conte
 type Mode = 'Content' | 'Data' | 'FlatData';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-inspection',
     styleUrls: ['./content-inspection.component.scss'],
     templateUrl: './content-inspection.component.html',

frontend/src/app/features/content/pages/content/references/content-references.component.ts

@@ -11,7 +11,6 @@ import { AppLanguageDto, ComponentContentsState, ContentDto, ContentsColumnsPipe
 import { ReferenceItemComponent } from '../../../shared/references/reference-item.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-references',
     styleUrls: ['./content-references.component.scss'],
     templateUrl: './content-references.component.html',

frontend/src/app/features/content/pages/contents-plugin/contents-plugin.component.ts

@@ -11,7 +11,6 @@ import { LayoutComponent, SchemasState } from '@app/shared';
 import { ContentExtensionComponent } from '../../shared/content-extension.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-contents-plugin',
     styleUrls: ['./contents-plugin.component.scss'],
     templateUrl: './contents-plugin.component.html',

frontend/src/app/features/content/pages/contents/contents-filters-page.component.ts

@@ -11,7 +11,6 @@ import { map } from 'rxjs/operators';
 import { ContentsState, defined, LayoutComponent, Queries, Query, QueryListComponent, SavedQueriesComponent, SchemasState, TranslatePipe, UIState } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-contents-filters-page',
     styleUrls: ['./contents-filters-page.component.scss'],
     templateUrl: './contents-filters-page.component.html',

frontend/src/app/features/content/pages/contents/contents-page.component.ts

@@ -19,7 +19,6 @@ import { ContentComponent } from '../../shared/list/content.component';
 import { CustomViewEditorComponent } from './custom-view-editor.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-contents-page',
     styleUrls: ['./contents-page.component.scss'],
     templateUrl: './contents-page.component.html',

frontend/src/app/features/content/pages/contents/custom-view-editor.component.ts

@@ -11,7 +11,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { TableField, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-custom-view-editor',
     styleUrls: ['./custom-view-editor.component.scss'],
     templateUrl: './custom-view-editor.component.html',

frontend/src/app/features/content/pages/references/references-page.component.ts

@@ -13,7 +13,6 @@ import { AppLanguageDto, ComponentContentsState, ContentsColumnsPipe, LanguageSe
 import { ReferenceItemComponent } from '../../shared/references/reference-item.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-references-page',
     styleUrls: ['./references-page.component.scss'],
     templateUrl: './references-page.component.html',

frontend/src/app/features/content/pages/schemas/schemas-page.component.ts

@@ -14,7 +14,6 @@ import { map } from 'rxjs/operators';
 import { AppsState, getCategoryTree, LayoutComponent, SchemaCategoryComponent, SchemasState, Settings, TitleComponent, TranslatePipe, UIOptions, value$ } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-schemas-page',
     styleUrls: ['./schemas-page.component.scss'],
     templateUrl: './schemas-page.component.html',
@@ -30,7 +29,7 @@ import { AppsState, getCategoryTree, LayoutComponent, SchemaCategoryComponent, S
         TitleComponent,
         TranslatePipe,
     ],
-        })
+})
 export class SchemasPageComponent {
     public schemasFilter = new UntypedFormControl();
 

frontend/src/app/features/content/pages/sidebar/sidebar-page.component.ts

@@ -12,7 +12,6 @@ import { ContentsState, defined, LayoutComponent, SchemasState } from '@app/shar
 import { ContentExtensionComponent } from '../../shared/content-extension.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-sidebar-page',
     styleUrls: ['./sidebar-page.component.scss'],
     templateUrl: './sidebar-page.component.html',

frontend/src/app/features/content/shared/content-extension.component.ts

@@ -10,7 +10,6 @@ import { Router } from '@angular/router';
 import { ApiUrlConfig, AppsState, AuthService, computeEditorUrl, ContentDto, SafeResourceUrlPipe, SchemaDto, TypedSimpleChanges, Types } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-extension',
     styleUrls: ['./content-extension.component.scss'],
     templateUrl: './content-extension.component.html',

frontend/src/app/features/content/shared/due-time-selector.component.html

@@ -14,7 +14,7 @@
                 {{ "contents.changeStatusToLater" | sqxTranslate: { action: dueTimeAction } }}
             </label>
         </div>
-        <sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" enforceTime="true" hideClear="true" mode="DateTime" [(ngModel)]="dueTime" />
+        <sqx-date-time-editor [disabled]="dueTimeMode === 'Immediately'" hideClear="true" mode="DateTime" [(ngModel)]="dueTime" />
     </ng-container>
     <ng-container footer>
         <button class="btn btn-text-secondary" (click)="cancelStatusChange()" type="button">{{ "common.cancel" | sqxTranslate }}</button>

frontend/src/app/features/content/shared/due-time-selector.component.ts

@@ -13,7 +13,6 @@ import { DateTime, DateTimeEditorComponent, DialogModel, FocusOnInitDirective, M
 const OPTION_IMMEDIATELY = 'Immediately';
 
 @Component({
-    standalone: true,
     selector: 'sqx-due-time-selector',
     styleUrls: ['./due-time-selector.component.scss'],
     templateUrl: './due-time-selector.component.html',

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

@@ -14,7 +14,6 @@ import { AppLanguageDto, ComponentsFieldPropertiesDto, ConfirmClickDirective, di
 import { ArrayItemComponent } from './array-item.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-array-editor',
     styleUrls: ['./array-editor.component.scss'],
     templateUrl: './array-editor.component.html',

frontend/src/app/features/content/shared/forms/array-item.component.ts

@@ -13,7 +13,6 @@ import { AppLanguageDto, ComponentForm, EditContentForm, FieldDto, FieldFormatte
 import { ComponentSectionComponent } from './component-section.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-array-item',
     styleUrls: ['./array-item.component.scss'],
     templateUrl: './array-item.component.html',

frontend/src/app/features/content/shared/forms/assets-editor.component.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'mixins';
 @import 'vars';
 
@@ -36,8 +37,8 @@
 
 .btn-add {
     &.drag {
-        border-color: darken($color-theme-secondary, 20%);
-        color: darken($color-border, 40%);
+        border-color: color.adjust($color-theme-secondary, $lightness: -20%);
+        color: color.adjust($color-border, $lightness: -40%);
         cursor: copy;
     }
 }

frontend/src/app/features/content/shared/forms/assets-editor.component.ts

@@ -41,7 +41,6 @@ interface State {
 }
 
 @Component({
-    standalone: true,
     selector: 'sqx-assets-editor',
     styleUrls: ['./assets-editor.component.scss'],
     templateUrl: './assets-editor.component.html',

frontend/src/app/features/content/shared/forms/component-section.component.ts

@@ -11,7 +11,6 @@ import { AppLanguageDto, EditContentForm, FieldDto, FieldSection, FormHintCompon
 import { FieldEditorComponent } from './field-editor.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-component-section',
     styleUrls: ['./component-section.component.scss'],
     templateUrl: './component-section.component.html',

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

@@ -12,7 +12,6 @@ import { AppLanguageDto, ComponentFieldPropertiesDto, ComponentForm, disabled$,
 import { ComponentSectionComponent } from './component-section.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-component',
     styleUrls: ['./component.component.scss'],
     templateUrl: './component.component.html',

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

@@ -14,7 +14,6 @@ import { FieldEditorComponent } from './field-editor.component';
 import { FieldLanguagesComponent } from './field-languages.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-field',
     styleUrls: ['./content-field.component.scss'],
     templateUrl: './content-field.component.html',

frontend/src/app/features/content/shared/forms/content-section.component.ts

@@ -16,7 +16,6 @@ interface State {
 }
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-section',
     styleUrls: ['./content-section.component.scss'],
     templateUrl: './content-section.component.html',

frontend/src/app/features/content/shared/forms/field-copy-button.component.ts

@@ -11,7 +11,6 @@ import { FormsModule } from '@angular/forms';
 import { AppLanguageDto, CheckboxGroupComponent, DropdownMenuComponent, FieldForm, ModalDirective, ModalModel, ModalPlacementDirective, TooltipDirective, TranslatePipe, TypedSimpleChanges } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-field-copy-button',
     styleUrls: ['./field-copy-button.component.scss'],
     templateUrl: './field-copy-button.component.html',

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

@@ -128,7 +128,7 @@
                     }
 
                     @case ("DateTime") {
-                        <sqx-date-time-editor enforceTime="true" [formControl]="$any(fieldForm)" [mode]="field.rawProperties.editor" />
+                        <sqx-date-time-editor [formControl]="$any(fieldForm)" [mode]="field.rawProperties.editor" />
                     }
 
                     @case ("Geolocation") {

frontend/src/app/features/content/shared/forms/field-editor.component.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'mixins';
 @import 'vars';
 
@@ -47,8 +48,8 @@
     margin-bottom: 1rem;
 
     &-separator {
-        border-bottom: 1px solid darken($color-border, 5%);
-        color: lighten($color-text, 20%);
+        border-bottom: 1px solid color.adjust($color-border, $lightness: -5%);
+        color: color.adjust($color-text, $lightness: 20%);
         font-size: 1.3rem;
         font-weight: normal;
         margin-bottom: 0;

frontend/src/app/features/content/shared/forms/field-editor.component.ts

@@ -22,7 +22,6 @@ import { IFrameEditorComponent } from './iframe-editor.component';
 import { StockPhotoEditorComponent } from './stock-photo-editor.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-field-editor',
     styleUrls: ['./field-editor.component.scss'],
     templateUrl: './field-editor.component.html',

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

@@ -10,7 +10,6 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, Inp
 import { AppLanguageDto, FieldForm, LanguageSelectorComponent, TourHintDirective, TourStepDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-field-languages',
     styleUrls: ['./field-languages.component.scss'],
     templateUrl: './field-languages.component.html',

frontend/src/app/features/content/shared/forms/iframe-editor.component.ts

@@ -16,7 +16,6 @@ interface State {
 }
 
 @Component({
-    standalone: true,
     selector: 'sqx-iframe-editor',
     styleUrls: ['./iframe-editor.component.scss'],
     templateUrl: './iframe-editor.component.html',

frontend/src/app/features/content/shared/forms/stock-photo-editor.component.ts

@@ -33,7 +33,6 @@ interface State {
 type Request = { search?: string; page: number };
 
 @Component({
-    standalone: true,
     selector: 'sqx-stock-photo-editor',
     styleUrls: ['./stock-photo-editor.component.scss'],
     templateUrl: './stock-photo-editor.component.html',

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

@@ -15,7 +15,6 @@ import { RouterLink } from '@angular/router';
 import { AppLanguageDto, ConfirmClickDirective, ContentDto, ContentListCellDirective, ContentListCellResizeDirective, ContentListFieldComponent, ContentsState, ContentStatusComponent, DropdownMenuComponent, ExternalLinkDirective, ModalDirective, ModalModel, ModalPlacementDirective, PatchContentForm, SchemaDto, StopClickDirective, TableField, TableSettings, TabRouterlinkDirective, TranslatePipe, TypedSimpleChanges } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: '[sqxContent][language][languages][tableFields][schema][tableSettings]',
     styleUrls: ['./content.component.scss'],
     templateUrl: './content.component.html',

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

@@ -20,7 +20,6 @@ interface State {
 }
 
 @Component({
-    standalone: true,
     selector: 'sqx-preview-button',
     styleUrls: ['./preview-button.component.scss'],
     templateUrl: './preview-button.component.html',

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

@@ -12,7 +12,6 @@ import { AppLanguageDto, ComponentContentsState, ContentDto, EditContentForm, Fo
 import { ContentSectionComponent } from '../forms/content-section.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-creator',
     styleUrls: ['./content-creator.component.scss'],
     templateUrl: './content-creator.component.html',

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

@@ -30,7 +30,6 @@ type ContentName = { name: string; id?: string };
 const NO_EMIT = { emitEvent: false };
 
 @Component({
-    standalone: true,
     selector: 'sqx-reference-dropdown',
     styleUrls: ['./reference-dropdown.component.scss'],
     templateUrl: './reference-dropdown.component.html',

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

@@ -13,7 +13,6 @@ import { RouterLink } from '@angular/router';
 import { AppLanguageDto, ConfirmClickDirective, ContentDto, ContentListCellDirective, ContentListFieldComponent, ContentValueComponent, getContentValue, META_FIELDS, TooltipDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: '[sqxReferenceItem][language][languages]',
     styleUrls: ['./reference-item.component.scss'],
     templateUrl: './reference-item.component.html',

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

@@ -22,7 +22,6 @@ interface State {
 const NO_EMIT = { emitEvent: false };
 
 @Component({
-    standalone: true,
     selector: 'sqx-references-checkboxes',
     styleUrls: ['./references-checkboxes.component.scss'],
     templateUrl: './references-checkboxes.component.html',

frontend/src/app/features/content/shared/references/references-editor.component.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'mixins';
 @import 'vars';
 
@@ -31,7 +32,7 @@
 }
 
 .invalid {
-    color: darken($color-border, 30%);
+    color: color.adjust($color-border, $lightness: -30%);
     font-size: 1.2rem;
     font-weight: normal;
     padding: 2rem;

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

@@ -26,7 +26,6 @@ interface State {
 }
 
 @Component({
-    standalone: true,
     selector: 'sqx-references-editor',
     styleUrls: ['./references-editor.component.scss'],
     templateUrl: './references-editor.component.html',

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

@@ -22,7 +22,6 @@ interface State {
 const NO_EMIT = { emitEvent: false };
 
 @Component({
-    standalone: true,
     selector: 'sqx-references-radio-buttons',
     styleUrls: ['./references-radio-buttons.component.scss'],
     templateUrl: './references-radio-buttons.component.html',

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

@@ -26,7 +26,6 @@ interface State {
 const NO_EMIT = { emitEvent: false };
 
 @Component({
-    standalone: true,
     selector: 'sqx-references-tags',
     styleUrls: ['./references-tags.component.scss'],
     templateUrl: './references-tags.component.html',

frontend/src/app/features/dashboard/pages/cards/api-card.component.ts

@@ -9,7 +9,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AppDto, ExternalLinkDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-api-card',
     styleUrls: ['./api-card.component.scss'],
     templateUrl: './api-card.component.html',

frontend/src/app/features/dashboard/pages/cards/content-summary-card.component.ts

@@ -14,7 +14,6 @@ interface State {
 }
 
 @Component({
-    standalone: true,
     selector: 'sqx-content-summary-card',
     styleUrls: ['./content-summary-card.component.scss'],
     templateUrl: './content-summary-card.component.html',

frontend/src/app/features/dashboard/pages/cards/github-card.component.ts

@@ -9,7 +9,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ExternalLinkDirective, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-github-card',
     styleUrls: ['./github-card.component.scss'],
     templateUrl: './github-card.component.html',

frontend/src/app/features/dashboard/pages/cards/history-card.component.ts

@@ -11,7 +11,6 @@ import { Observable } from 'rxjs';
 import { AppDto, HistoryEventDto, HistoryListComponent, HistoryService, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-history-card',
     styleUrls: ['./history-card.component.scss'],
     templateUrl: './history-card.component.html',

frontend/src/app/features/dashboard/pages/cards/schema-card.component.ts

@@ -11,7 +11,6 @@ import { RouterLink } from '@angular/router';
 import { AppDto, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-schema-card',
     styleUrls: ['./schema-card.component.scss'],
     templateUrl: './schema-card.component.html',

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

@@ -13,7 +13,6 @@ import { take } from 'rxjs/operators';
 import { AppDto, AppsState, AuthService, CodeEditorComponent, ConfirmClickDirective, DialogModel, DialogService, DropdownMenuComponent, LocalizerService, ModalDialogComponent, ModalDirective, ModalModel, ModalPlacementDirective, TooltipDirective, TranslatePipe, TypedSimpleChanges, Types, UIState } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-dashboard-config',
     styleUrls: ['./dashboard-config.component.scss'],
     templateUrl: './dashboard-config.component.html',

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

@@ -17,7 +17,6 @@ import { SchemaCardComponent } from './cards/schema-card.component';
 import { DashboardConfigComponent } from './dashboard-config.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-dashboard-page',
     styleUrls: ['./dashboard-page.component.scss'],
     templateUrl: './dashboard-page.component.html',

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

@@ -6,7 +6,7 @@
  */
 
 /* eslint-disable @angular-eslint/component-selector */
-
+/* eslint-disable @angular-eslint/no-output-native */
 
 import { booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -16,7 +16,6 @@ import { RuleElementComponent } from '../../shared/rule-element.component';
 import { StateDetailsComponent } from '../../shared/state-details.component';
 
 @Component({
-    standalone: true,
     selector: '[sqxRuleEvent]',
     styleUrls: ['./rule-event.component.scss'],
     templateUrl: './rule-event.component.html',

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

@@ -12,7 +12,6 @@ import { ConfirmClickDirective, LayoutComponent, ListViewComponent, PagerCompone
 import { RuleEventComponent } from './rule-event.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-rule-events-page',
     styleUrls: ['./rule-events-page.component.scss'],
     templateUrl: './rule-events-page.component.html',

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

@@ -11,7 +11,6 @@ import { RuleElementComponent } from '../../shared/rule-element.component';
 import { FlowStepAdd, FlowStepRemove, FlowStepUpdate } from './types';
 
 @Component({
-    standalone: true,
     selector: 'sqx-branch',
     styleUrls: ['./branch.component.scss'],
     templateUrl: './branch.component.html',

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

@@ -1,9 +1,12 @@
+@use 'sass:color';
 @import "mixins";
 @import "vars";
 
+$background-color: color.adjust($color-border, $lightness: 2%);
+
 :host ::ng-deep {
     .panel2-main-inner.white {
-        background-image: radial-gradient(lighten($color-border, 2%) 1px, transparent 0);
+        background-image: radial-gradient($background-color 1px, transparent 0);
         background-size: 1rem 1rem;
     }
 

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

@@ -27,7 +27,6 @@ type Snapshot = {
 };
 
 @Component({
-    standalone: true,
     selector: 'sqx-rule-page',
     styleUrls: ['./rule-page.component.scss'],
     templateUrl: './rule-page.component.html',

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

@@ -19,18 +19,18 @@
                     </div>
 
                     <div class="form-group row">
-                    <div class="col-9 offset-3">
-                        <div class="form-check">
-                            <input
-                                class="form-check-input"
-                                id="stepIgnore"
-                                [(ngModel)]="stepIgnoreError"
-                                [ngModelOptions]="{ standalone: true }"
-                                type="checkbox" />
-                            <label class="form-check-label" for="stepIgnore"> {{ "rules.stepIgnoreError" | sqxTranslate }} </label>
+                        <div class="col-9 offset-3">
+                            <div class="form-check">
+                                <input
+                                    class="form-check-input"
+                                    id="stepIgnore"
+                                    [(ngModel)]="stepIgnoreError"
+                                    [ngModelOptions]="{ standalone: true }"
+                                    type="checkbox" />
+                                <label class="form-check-label" for="stepIgnore"> {{ "rules.stepIgnoreError" | sqxTranslate }} </label>
+                            </div>
+                            <sqx-form-hint> {{ "rules.stepIgnoreErrorHint" | sqxTranslate }} </sqx-form-hint>
                         </div>
-                        <sqx-form-hint> {{ "rules.stepIgnoreErrorHint" | sqxTranslate }} </sqx-form-hint>
-                    </div>
                     </div>
 
                     <hr />

frontend/src/app/features/rules/pages/rule/step-dialog.component.ts

@@ -14,7 +14,6 @@ import { FormattableInputComponent } from '../../shared/actions/formattable-inpu
 import { RuleElementComponent } from '../../shared/rule-element.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-step-dialog',
     styleUrls: ['./step-dialog.component.scss'],
     templateUrl: './step-dialog.component.html',

frontend/src/app/features/rules/pages/rule/trigger-dialog.component.ts

@@ -18,7 +18,6 @@ import { SchemaChangedTriggerComponent } from '../../shared/triggers/schema-chan
 import { UsageTriggerComponent } from '../../shared/triggers/usage-trigger.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-trigger-dialog',
     styleUrls: ['./trigger-dialog.component.scss'],
     templateUrl: './trigger-dialog.component.html',

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

@@ -13,7 +13,6 @@ import { BranchItem, ConfirmClickDirective, DropdownMenuComponent, DynamicRuleDt
 import { RuleElementComponent } from '../../shared/rule-element.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-rule',
     styleUrls: ['./rule.component.scss'],
     templateUrl: './rule.component.html',

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

@@ -12,7 +12,6 @@ import { ALL_TRIGGERS, DynamicRuleDto, DynamicUpdateRuleDto, LayoutComponent, Li
 import { RuleComponent } from './rule.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-rules-page',
     styleUrls: ['./rules-page.component.scss'],
     templateUrl: './rules-page.component.html',

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

@@ -13,7 +13,6 @@ import { RuleConfigured } from '../messages';
 import { SimulatedRuleEventComponent } from './simulated-rule-event.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-simulator-events-page',
     styleUrls: ['./rule-simulator-page.component.scss'],
     templateUrl: './rule-simulator-page.component.html',

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

@@ -11,7 +11,6 @@ import { SimulatedRuleEventDto, TranslatePipe, TypedSimpleChanges } from '@app/s
 import { HistoryStepComponent } from '../../shared/history-step.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-rule-transition',
     styleUrls: ['./rule-transition.component.scss'],
     templateUrl: './rule-transition.component.html',

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

@@ -32,7 +32,6 @@ const ERRORS_AFTER_ENRICHED_EVENT = [
 ];
 
 @Component({
-    standalone: true,
     selector: '[sqxSimulatedRuleEvent]',
     styleUrls: ['./simulated-rule-event.component.scss'],
     templateUrl: './simulated-rule-event.component.html',

frontend/src/app/features/rules/shared/actions/branches-input.component.ts

@@ -11,7 +11,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ControlErrorsComponent, ExtendedFormGroup, TemplatedFormArray, TranslatePipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-branches-input',
     styleUrls: ['./branches-input.component.scss'],
     templateUrl: './branches-input.component.html',

frontend/src/app/features/rules/shared/actions/formattable-input.component.ts

@@ -17,7 +17,6 @@ export const SQX_FORMATTABLE_INPUT_CONTROL_VALUE_ACCESSOR: any = {
 };
 
 @Component({
-    standalone: true,
     selector: 'sqx-formattable-input',
     styleUrls: ['./formattable-input.component.scss'],
     templateUrl: './formattable-input.component.html',

frontend/src/app/features/rules/shared/history-step.component.ts

@@ -12,7 +12,6 @@ import { RuleTriggerMetadataDto, TranslatePipe } from '@app/shared';
 import { RuleElementComponent } from './rule-element.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-history-step',
     styleUrls: ['./history-step.component.scss'],
     templateUrl: './history-step.component.html',

frontend/src/app/features/rules/shared/pipes.ts

@@ -9,7 +9,6 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { SimulatedRuleEventDto } from '@app/shared';
 
 @Pipe({
-    standalone: true,
     name: 'sqxRuleClass',
     pure: true,
 })
@@ -30,7 +29,6 @@ export class RuleClassPipe implements PipeTransform {
 }
 
 @Pipe({
-    standalone: true,
     name: 'sqxSimulatedRuleEventStatus',
     pure: true,
 })

frontend/src/app/features/rules/shared/rule-element.component.ts

@@ -11,7 +11,6 @@ import { ConfirmClickDirective, DarkenPipe, ExternalLinkDirective, RuleTriggerMe
 import { RuleIconComponent } from './rule-icon.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-rule-element',
     styleUrls: ['./rule-element.component.scss'],
     templateUrl: './rule-element.component.html',

frontend/src/app/features/rules/shared/rule-icon.component.ts

@@ -10,7 +10,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { RuleTriggerMetadataDto, SafeHtmlPipe } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-rule-icon',
     styleUrls: ['./rule-icon.component.scss'],
     templateUrl: './rule-icon.component.html',

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

@@ -11,7 +11,6 @@ import { FormsModule } from '@angular/forms';
 import { CodeEditorComponent, FlowExecutionStepAttemptDto, TranslatePipe, TypedSimpleChanges } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-state-attempt',
     styleUrls: ['./state-attempt.component.scss'],
     templateUrl: './state-attempt.component.html',

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

@@ -13,7 +13,6 @@ import { HistoryStepComponent } from './history-step.component';
 import { StateStepComponent } from './state-step.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-state-details',
     styleUrls: ['./state-details.component.scss'],
     templateUrl: './state-details.component.html',

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

@@ -11,7 +11,6 @@ import { FormsModule } from '@angular/forms';
 import { CodeEditorComponent, RuleElementPropertyDto, Types } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-state-step-property',
     styleUrls: ['./state-step-property.component.scss'],
     templateUrl: './state-step-property.component.html',

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

@@ -14,7 +14,6 @@ import { StateAttemptComponent } from './state-attempt.component';
 import { StateStepPropertyComponent } from './state-step-property.component';
 
 @Component({
-    standalone: true,
     selector: 'sqx-state-step',
     styleUrls: ['./state-step.component.scss'],
     templateUrl: './state-step.component.html',

frontend/src/app/features/rules/shared/triggers/asset-changed-trigger.component.ts

@@ -10,7 +10,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CodeComponent, ControlErrorsComponent, FormHintComponent, TranslatePipe, TriggerForm } from '@app/shared';
 
 @Component({
-    standalone: true,
     selector: 'sqx-asset-changed-trigger',
     styleUrls: ['./asset-changed-trigger.component.scss'],
     templateUrl: './asset-changed-trigger.component.html',