Strict (#821)

* Update packages

* Test

* Lint fixes.

* strict mode

frontend/app-config/webpack.config.js

@@ -28,7 +28,7 @@ const plugins = {
     // https://www.npmjs.com/package/@ngtools/webpack
     NgToolsWebpack: require('@ngtools/webpack'),
     // https://github.com/NMFR/optimize-css-assets-webpack-plugin
-    OptimizeCSSAssetsPlugin: require('optimize-css-assets-webpack-plugin'),
+    CssMinimizerPlugin: require('css-minimizer-webpack-plugin'),
     // https://webpack.js.org/plugins/eslint-webpack-plugin/
     ESLintPlugin: require('eslint-webpack-plugin'),
     // https://github.com/webpack-contrib/stylelint-webpack-plugin
@@ -53,7 +53,7 @@ module.exports = function calculateConfig(env) {
     const configFile = isTests ? 'tsconfig.spec.json' : 'tsconfig.app.json';
 
     // eslint-disable-next-line no-console
-    console.log(`Use ${configFile}, Production: ${!!isProduction}, DevServer: ${isDevServer}`);
+    console.log(`Use ${configFile}, Production: ${!!isProduction}, DevServer: ${!!isDevServer}`);
 
     const config = {
         mode: isProduction ? 'production' : 'development',
@@ -401,7 +401,7 @@ module.exports = function calculateConfig(env) {
                     extractComments: true,
                 }),
 
-                new plugins.OptimizeCSSAssetsPlugin({}),
+                new plugins.CssMinimizerPlugin({}),
             ],
         };
 

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

@@ -19,7 +19,7 @@ export class EventConsumerComponent {
     public error = new EventEmitter();
 
     @Input('sqxEventConsumer')
-    public eventConsumer: EventConsumerDto;
+    public eventConsumer!: EventConsumerDto;
 
     constructor(
         private readonly eventConsumersState: EventConsumersState,

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

@@ -16,7 +16,7 @@ import { UserDto, UsersState } from '@app/features/administration/internal';
 })
 export class UserComponent {
     @Input('sqxUser')
-    public user: UserDto;
+    public user!: UserDto;
 
     constructor(
         private readonly usersState: UsersState,

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

@@ -20,7 +20,7 @@ import { catchError } from 'rxjs/operators';
 })
 export class GraphQLPageComponent implements AfterViewInit {
     @ViewChild('graphiQLContainer', { static: false })
-    public graphiQLContainer: ElementRef;
+    public graphiQLContainer!: ElementRef;
 
     constructor(
         private readonly appsState: AppsState,

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

@@ -16,7 +16,7 @@ import { AppDto, ModalModel } from '@app/shared';
 })
 export class AppComponent {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Output()
     public leave = new EventEmitter<AppDto>();

frontend/app/features/apps/pages/apps-page.component.html

@@ -83,5 +83,5 @@
 </ng-container>
 
 <ng-container *sqxModal="newsDialog">
-    <sqx-news-dialog [features]="newsFeatures" (close)="newsDialog.hide()"></sqx-news-dialog>
+    <sqx-news-dialog [features]="newsFeatures!" (close)="newsDialog.hide()"></sqx-news-dialog>
 </ng-container>

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

@@ -21,10 +21,10 @@ export class AppsPageComponent implements OnInit {
 
     public onboardingDialog = new DialogModel();
 
-    public newsFeatures: ReadonlyArray<FeatureDto>;
+    public newsFeatures?: ReadonlyArray<FeatureDto>;
     public newsDialog = new DialogModel();
 
-    public info: string;
+    public info = '';
 
     constructor(
         public readonly appsState: AppsState,

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

@@ -18,7 +18,7 @@ export class NewsDialogComponent {
     public close = new EventEmitter();
 
     @Input()
-    public features: ReadonlyArray<FeatureDto>;
+    public features!: ReadonlyArray<FeatureDto>;
 
     public trackByFeature(_index: number, feature: FeatureDto) {
         return feature;

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

@@ -18,7 +18,7 @@ export class AssetTagDialogComponent implements OnInit {
     public complete = new EventEmitter();
 
     @Input()
-    public tagName: string;
+    public tagName!: string;
 
     public editForm = new RenameAssetTagForm();
 

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

@@ -24,5 +24,5 @@
 </div>
 
 <ng-container *sqxModal="tagRenameDialog">
-    <sqx-asset-tag-dialog [tagName]="tagRenaming.name" (complete)="tagRenameDialog.hide()"></sqx-asset-tag-dialog>
+    <sqx-asset-tag-dialog [tagName]="tagRenaming!.name" (complete)="tagRenameDialog.hide()"></sqx-asset-tag-dialog>
 </ng-container>

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

@@ -24,15 +24,15 @@ export class AssetTagsComponent {
     public toggle = new EventEmitter<string>();
 
     @Input()
-    public tags: ReadonlyArray<TagItem>;
+    public tags!: ReadonlyArray<TagItem>;
 
     @Input()
-    public tagsSelected: TagsSelected;
+    public tagsSelected!: TagsSelected;
 
     @Input()
-    public canRename: boolean;
+    public canRename = false;
 
-    public tagRenaming: TagItem;
+    public tagRenaming?: TagItem;
     public tagRenameDialog = new DialogModel();
 
     public isEmpty() {

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

@@ -22,7 +22,7 @@ export class AssetsPageComponent extends ResourceOwner implements OnInit {
 
     public addAssetFolderDialog = new DialogModel();
 
-    public isListView: boolean;
+    public isListView = false;
 
     constructor(
         public readonly assetsRoute: Router2State,

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

@@ -19,19 +19,19 @@ type ViewMode = 'day' | 'week' | 'month';
 })
 export class CalendarPageComponent implements AfterViewInit, OnDestroy {
     private calendar: any;
-    private language: LanguageDto;
+    private language!: LanguageDto;
 
     @ViewChild('calendarContainer', { static: false })
-    public calendarContainer: ElementRef;
+    public calendarContainer!: ElementRef;
 
     public view: ViewMode = 'month';
 
     public content?: ContentDto;
     public contentDialog = new DialogModel();
 
-    public title: string;
+    public title = '';
 
-    public isLoading: boolean;
+    public isLoading = false;
 
     constructor(
         private readonly appsState: AppsState,

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

@@ -22,12 +22,12 @@ export class ContentEventComponent implements OnChanges {
     public dataCompare = new EventEmitter();
 
     @Input()
-    public event: HistoryEventDto;
+    public event!: HistoryEventDto;
 
     @Input()
-    public content: ContentDto;
+    public content!: ContentDto;
 
-    public canLoadOrCompare: boolean;
+    public canLoadOrCompare = false;
 
     public ngOnChanges() {
         this.canLoadOrCompare =

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

@@ -19,10 +19,10 @@ import { ContentPageComponent } from './content-page.component';
 })
 export class ContentHistoryPageComponent extends ResourceOwner implements OnInit {
     @ViewChild('dueTimeSelector', { static: false })
-    public dueTimeSelector: DueTimeSelectorComponent;
+    public dueTimeSelector!: DueTimeSelectorComponent;
 
-    public content: ContentDto;
-    public contentEvents: Observable<ReadonlyArray<HistoryEventDto>>;
+    public content!: ContentDto;
+    public contentEvents?: Observable<ReadonlyArray<HistoryEventDto>>;
 
     public dropdown = new ModalModel();
     public dropdownNew = new ModalModel();

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

@@ -22,23 +22,23 @@ import { filter, map, tap } from 'rxjs/operators';
     ],
 })
 export class ContentPageComponent extends ResourceOwner implements CanComponentDeactivate, OnInit {
-    private autoSaveKey: AutoSaveKey;
+    private autoSaveKey!: AutoSaveKey;
 
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     public formContext: any;
 
     public contentTab = this.route.queryParams.pipe(map(x => x['tab'] || 'editor'));
     public content?: ContentDto | null;
     public contentId = '';
-    public contentVersion: Version | null;
-    public contentForm: EditContentForm;
+    public contentVersion: Version | null = null;
+    public contentForm!: EditContentForm;
     public contentFormCompare: EditContentForm | null = null;
 
     public dropdown = new ModalModel();
 
-    public language: AppLanguageDto;
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public language!: AppLanguageDto;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     public confirmPreview = () => {
         return this.checkPendingChangesBeforePreview();

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

@@ -27,28 +27,28 @@ export class ContentEditorComponent {
     public isNew = false;
 
     @Input()
-    public contentId: string;
+    public contentId!: string;
 
     @Input()
-    public contentForm: EditContentForm;
+    public contentForm!: EditContentForm;
 
     @Input()
-    public contentVersion: Version | null;
+    public contentVersion?: Version | null;
 
     @Input()
     public contentFormCompare?: EditContentForm | null;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     public trackBySection(_index: number, section: FieldSection<RootFieldDto, FieldForm>) {
         return section.separator?.fieldId;

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

@@ -22,31 +22,31 @@ export class ContentFieldComponent implements OnChanges {
     public isCompact?: boolean | null;
 
     @Input()
-    public form: EditContentForm;
+    public form!: EditContentForm;
 
     @Input()
     public formCompare?: EditContentForm | null;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public formLevel: number;
+    public formLevel!: number;
 
     @Input()
-    public formModel: FieldForm;
+    public formModel!: FieldForm;
 
     @Input()
     public formModelCompare?: FieldForm;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @HostBinding('class')
     public get class() {
@@ -63,8 +63,8 @@ export class ContentFieldComponent implements OnChanges {
 
     public showAllControls = false;
 
-    public isDifferent: Observable<boolean>;
-    public isInvalid: Observable<boolean>;
+    public isDifferent?: Observable<boolean>;
+    public isInvalid?: Observable<boolean>;
 
     constructor(
         private readonly appsState: AppsState,

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

@@ -27,28 +27,28 @@ export class ContentSectionComponent extends StatefulComponent<State> implements
     public isCompact?: boolean | null;
 
     @Input()
-    public form: EditContentForm;
+    public form!: EditContentForm;
 
     @Input()
     public formCompare?: EditContentForm | null;
 
     @Input()
-    public formLevel: number;
+    public formLevel!: number;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public formSection: FieldSection<RootFieldDto, FieldForm>;
+    public formSection!: FieldSection<RootFieldDto, FieldForm>;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     constructor(changeDetector: ChangeDetectorRef,
         private readonly localStore: LocalStoreService,

frontend/app/features/content/pages/content/editor/field-copy-button.component.ts

@@ -15,15 +15,15 @@ import { AppLanguageDto, FieldForm, ModalModel } from '@app/shared';
 })
 export class FieldCopyButtonComponent implements OnChanges {
     @Input()
-    public formModel: FieldForm;
+    public formModel!: FieldForm;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
-    public languageCodes: ReadonlyArray<string>;
+    public languageCodes: ReadonlyArray<string> = [];
 
-    public copySource: string;
-    public copyTargets: ReadonlyArray<string>;
+    public copySource = '';
+    public copyTargets?: ReadonlyArray<string>;
 
     public dropdown = new ModalModel();
 
@@ -45,7 +45,7 @@ export class FieldCopyButtonComponent implements OnChanges {
     }
 
     public copy() {
-        if (this.copySource && this.copyTargets?.length > 0) {
+        if (this.copySource && this.copyTargets && this.copyTargets?.length > 0) {
             const source = this.formModel.get(this.copySource).form.value;
 
             for (const target of this.copyTargets) {

frontend/app/features/content/pages/content/editor/field-languages.component.ts

@@ -25,13 +25,13 @@ export class FieldLanguagesComponent {
     public languageChange = new EventEmitter<AppLanguageDto>();
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()
-    public field: RootFieldDto;
+    public field!: RootFieldDto;
 
     public toggleShowAllControls() {
         this.showAllControlsChange.emit(!this.showAllControls);

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

@@ -21,16 +21,16 @@ export class ContentInspectionComponent implements OnChanges, OnDestroy {
     private languageChanges$ = new BehaviorSubject<AppLanguageDto | null>(null);
 
     @Input()
-    public appName: string;
+    public appName!: string;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()
-    public content: ContentDto;
+    public content!: ContentDto;
 
     public mode = new BehaviorSubject<Mode>('Content');
 

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

@@ -19,13 +19,13 @@ import { AppLanguageDto, ComponentContentsState, ContentDto, QuerySynchronizer,
 })
 export class ContentReferencesComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
-    public content: ContentDto;
+    public content!: ContentDto;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()
     public mode: 'references' | 'referencing' = 'references';

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

@@ -24,11 +24,11 @@ import { DueTimeSelectorComponent } from './../../shared/due-time-selector.compo
 })
 export class ContentsPageComponent extends ResourceOwner implements OnInit {
     @ViewChild('dueTimeSelector', { static: false })
-    public dueTimeSelector: DueTimeSelectorComponent;
+    public dueTimeSelector!: DueTimeSelectorComponent;
 
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
-    public tableView: TableFields;
+    public tableView!: TableFields;
     public tableViewModal = new ModalModel();
 
     public searchModal = new ModalModel();
@@ -39,8 +39,8 @@ export class ContentsPageComponent extends ResourceOwner implements OnInit {
     public selectionCanDelete = false;
     public selectionStatuses: { [name: string]: string } = {};
 
-    public language: AppLanguageDto;
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public language!: AppLanguageDto;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     public get disableScheduler() {
         return this.appsState.snapshot.selectedSettings?.hideScheduler === true;

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

@@ -19,12 +19,12 @@ export class CustomViewEditorComponent implements OnChanges {
     public fieldNamesChange = new EventEmitter<ReadonlyArray<string>>();
 
     @Input()
-    public fieldNames: string[];
+    public fieldNames!: string[];
 
     @Input()
-    public allFields: ReadonlyArray<string>;
+    public allFields!: ReadonlyArray<string>;
 
-    public fieldsNotAdded: ReadonlyArray<string>;
+    public fieldsNotAdded!: ReadonlyArray<string>;
 
     public ngOnChanges() {
         this.fieldsNotAdded = this.allFields.filter(n => this.fieldNames.indexOf(n) < 0);

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

@@ -41,7 +41,7 @@ export class SchemasPageComponent {
             return getCategoryTree(schemas, categories, filter);
         });
 
-    public isCollapsed: boolean;
+    public isCollapsed = false;
 
     public get width() {
         return this.isCollapsed ? '4rem' : '16rem';

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

@@ -21,20 +21,20 @@ export class ContentExtensionComponent extends ResourceOwner implements OnChange
     private isInitialized = false;
 
     @ViewChild('iframe', { static: false })
-    public iframe: ElementRef<HTMLIFrameElement>;
+    public iframe!: ElementRef<HTMLIFrameElement>;
 
     @Input()
     public content?: ContentDto | null;
 
     @Input()
-    public contentSchema: SchemaDto;
+    public contentSchema!: SchemaDto;
 
     @Input()
     public set url(value: string | undefined | null) {
         this.computedUrl = computeEditorUrl(value, this.appsState.snapshot.selectedSettings);
     }
 
-    public computedUrl: string;
+    public computedUrl = '';
 
     constructor(apiUrl: ApiUrlConfig, authService: AuthService,
         private readonly appsState: AppsState,

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

@@ -17,7 +17,7 @@ const OPTION_IMMEDIATELY = 'Immediately';
     templateUrl: './due-time-selector.component.html',
 })
 export class DueTimeSelectorComponent {
-    private dueTimeResult: Subject<string | null>;
+    private dueTimeResult?: Subject<string | null>;
 
     @Input()
     public disabled?: boolean | null;
@@ -42,8 +42,8 @@ export class DueTimeSelectorComponent {
     public confirmStatusChange() {
         const result = this.dueTimeMode === OPTION_IMMEDIATELY ? null : this.dueTime;
 
-        this.dueTimeResult.next(result);
-        this.dueTimeResult.complete();
+        this.dueTimeResult?.next(result);
+        this.dueTimeResult?.complete();
 
         this.cancelStatusChange();
     }

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

@@ -20,38 +20,38 @@ import { ArrayItemComponent } from './array-item.component';
 })
 export class ArrayEditorComponent implements OnChanges, OnInit {
     @Input()
-    public form: EditContentForm;
+    public form!: EditContentForm;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public formLevel: number;
+    public formLevel!: number;
 
     @Input()
-    public formModel: FieldArrayForm;
+    public formModel!: FieldArrayForm;
 
     @Input()
     public canUnset?: boolean | null;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @ViewChildren(ArrayItemComponent)
-    public children: QueryList<ArrayItemComponent>;
+    public children!: QueryList<ArrayItemComponent>;
 
     public isArray = false;
 
     public schemasDropdown = new ModalModel();
-    public schemasList: ReadonlyArray<SchemaDto>;
+    public schemasList: ReadonlyArray<SchemaDto> = [];
 
-    public isDisabled: Observable<boolean>;
+    public isDisabled?: Observable<boolean>;
     public isCollapsedInitial = false;
 
-    public isFull: Observable<boolean>;
+    public isFull?: Observable<boolean>;
 
     public get hasField() {
         return this.formModel.field['nested']?.length > 0;

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

@@ -20,7 +20,7 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-array-item[form][formContext][formLevel][language][languages][index]',
+    selector: 'sqx-array-item[form][formContext][formLevel][formModel][index][language][languages]',
     styleUrls: ['./array-item.component.scss'],
     templateUrl: './array-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -36,16 +36,16 @@ export class ArrayItemComponent extends StatefulComponent<State> implements OnCh
     public clone = new EventEmitter();
 
     @Input()
-    public form: EditContentForm;
+    public form!: EditContentForm;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public formLevel: number;
+    public formLevel!: number;
 
     @Input()
-    public formModel: ObjectFormBase;
+    public formModel!: ObjectFormBase;
 
     @Input()
     public canUnset?: boolean | null;
@@ -63,22 +63,22 @@ export class ArrayItemComponent extends StatefulComponent<State> implements OnCh
     public isDisabled?: boolean | null;
 
     @Input()
-    public index: number;
+    public index!: number;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @ViewChildren(ComponentSectionComponent)
-    public sections: QueryList<ComponentSectionComponent>;
+    public sections!: QueryList<ComponentSectionComponent>;
 
     public isCollapsed = false;
-    public isInvalid: Observable<boolean>;
-    public isInvalidComponent: Observable<boolean>;
+    public isInvalid?: Observable<boolean>;
+    public isInvalidComponent?: Observable<boolean>;
 
-    public title: Observable<string>;
+    public title?: Observable<string>;
 
     constructor(changeDetector: ChangeDetectorRef,
     ) {

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

@@ -17,22 +17,22 @@ import { FieldEditorComponent } from './field-editor.component';
 })
 export class ComponentSectionComponent {
     @Input()
-    public form: EditContentForm;
+    public form!: EditContentForm;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public formLevel: number;
+    public formLevel!: number;
 
     @Input()
-    public formSection: FieldSection<FieldDto, any>;
+    public formSection!: FieldSection<FieldDto, any>;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()
     public index: number | null | undefined;
@@ -41,7 +41,7 @@ export class ComponentSectionComponent {
     public canUnset?: boolean | null;
 
     @ViewChildren(FieldEditorComponent)
-    public editors: QueryList<FieldEditorComponent>;
+    public editors!: QueryList<FieldEditorComponent>;
 
     public reset() {
         this.editors.forEach(editor => {

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

@@ -20,28 +20,28 @@ export class ComponentComponent extends ResourceOwner implements OnChanges {
     public canUnset?: boolean | null;
 
     @Input()
-    public form: EditContentForm;
+    public form!: EditContentForm;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public formLevel: number;
+    public formLevel!: number;
 
     @Input()
-    public formModel: ComponentForm;
+    public formModel!: ComponentForm;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @ViewChildren(ComponentSectionComponent)
-    public sections: QueryList<ComponentSectionComponent>;
+    public sections!: QueryList<ComponentSectionComponent>;
 
     public schemasDropdown = new ModalModel();
-    public schemasList: ReadonlyArray<SchemaDto>;
+    public schemasList: ReadonlyArray<SchemaDto> = [];
 
     constructor(
         private readonly changeDetector: ChangeDetectorRef,

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

@@ -19,22 +19,22 @@ export class FieldEditorComponent implements OnChanges {
     public readonly uniqueId = MathHelper.guid();
 
     @Input()
-    public form: EditContentForm;
+    public form!: EditContentForm;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
-    public formLevel: number;
+    public formLevel!: number;
 
     @Input()
-    public formModel: AbstractContentForm<FieldDto, AbstractControl>;
+    public formModel!: AbstractContentForm<FieldDto, AbstractControl>;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()
     public index: number | null | undefined;
@@ -43,12 +43,12 @@ export class FieldEditorComponent implements OnChanges {
     public canUnset?: boolean | null;
 
     @Input()
-    public displaySuffix: string;
+    public displaySuffix = '';
 
     @ViewChild('editor', { static: false })
-    public editor: ElementRef;
+    public editor!: ElementRef;
 
-    public isEmpty: Observable<boolean>;
+    public isEmpty?: Observable<boolean>;
 
     public get field() {
         return this.formModel.field;

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

@@ -29,19 +29,19 @@ export class IFrameEditorComponent extends StatefulComponent<State> implements O
     private assetsCorrelationId: any;
 
     @ViewChild('iframe', { static: false })
-    public iframe: ElementRef<HTMLIFrameElement>;
+    public iframe!: ElementRef<HTMLIFrameElement>;
 
     @ViewChild('container', { static: false })
-    public container: ElementRef<HTMLElement>;
+    public container!: ElementRef<HTMLElement>;
 
     @ViewChild('inner', { static: false })
-    public inner: ElementRef<HTMLElement>;
+    public inner!: ElementRef<HTMLElement>;
 
     @Input()
     public context: any = {};
 
     @Input()
-    public formValue: any;
+    public formValue!: any;
 
     @Input()
     public formIndex?: number | null;
@@ -50,7 +50,7 @@ export class IFrameEditorComponent extends StatefulComponent<State> implements O
     public language?: string | null;
 
     @Input()
-    public formControlBinding: AbstractControl;
+    public formControlBinding!: AbstractControl;
 
     @Input()
     public set disabled(value: boolean | undefined | null) {
@@ -62,7 +62,7 @@ export class IFrameEditorComponent extends StatefulComponent<State> implements O
         this.computedUrl = computeEditorUrl(value, this.appsState.snapshot.selectedSettings);
     }
 
-    public computedUrl: string;
+    public computedUrl = '';
 
     public assetsDialog = new DialogModel();
 

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

@@ -33,10 +33,10 @@ export class ContentComponent implements OnChanges {
     public selected = false;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public listFields: ReadonlyArray<TableField>;
+    public listFields!: ReadonlyArray<TableField>;
 
     @Input()
     public cloneable?: boolean | null;
@@ -45,12 +45,12 @@ export class ContentComponent implements OnChanges {
     public link: any = null;
 
     @Input('sqxContent')
-    public content: ContentDto;
+    public content!: ContentDto;
 
     @ViewChildren(ContentListFieldComponent)
-    public fields: QueryList<ContentListFieldComponent>;
+    public fields!: QueryList<ContentListFieldComponent>;
 
-    public patchForm: PatchContentForm;
+    public patchForm?: PatchContentForm;
     public patchAllowed?: boolean | null;
 
     public dropdown = new ModalModel();
@@ -76,7 +76,7 @@ export class ContentComponent implements OnChanges {
     }
 
     public save() {
-        if (!this.content.canUpdate) {
+        if (!this.content.canUpdate || !this.patchForm) {
             return;
         }
 
@@ -86,12 +86,12 @@ export class ContentComponent implements OnChanges {
             this.contentsState.patch(this.content, value)
                 .subscribe({
                     next: () => {
-                        this.patchForm.submitCompleted({ noReset: true });
+                        this.patchForm!.submitCompleted({ noReset: true });
 
                         this.changeDetector.detectChanges();
                     },
                     error: error => {
-                        this.patchForm.submitFailed(error);
+                        this.patchForm!.submitFailed(error);
 
                         this.changeDetector.detectChanges();
                     },
@@ -108,7 +108,7 @@ export class ContentComponent implements OnChanges {
     }
 
     public cancel() {
-        this.patchForm.submitCompleted();
+        this.patchForm?.submitCompleted();
 
         this.fields.forEach(x => x.reset());
     }

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

@@ -29,10 +29,10 @@ export class PreviewButtonComponent extends StatefulComponent<State> implements
     public confirm?: () => Observable<boolean>;
 
     @Input()
-    public content: ContentDto;
+    public content!: ContentDto;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     public dropdown = new ModalModel();
 

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

@@ -29,21 +29,21 @@ export class ContentCreatorComponent extends ResourceOwner implements OnInit {
     public schemaName?: string | null;
 
     @Input()
-    public schemaIds: ReadonlyArray<string>;
+    public schemaIds?: ReadonlyArray<string>;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
     public schemas: ReadonlyArray<SchemaDto> = [];
 
-    public contentForm: EditContentForm;
+    public contentForm!: EditContentForm;
 
     constructor(
         private readonly contentsState: ComponentContentsState,
@@ -56,7 +56,7 @@ export class ContentCreatorComponent extends ResourceOwner implements OnInit {
         this.schemas = this.schemasState.snapshot.schemas.filter(x => x.canContentsCreate);
 
         if (this.schemaIds && this.schemaIds.length > 0) {
-            this.schemas = this.schemas.filter(x => this.schemaIds.indexOf(x.id) >= 0);
+            this.schemas = this.schemas.filter(x => this.schemaIds!.indexOf(x.id) >= 0);
         }
 
         const selectedSchema = this.schemas.find(x => x.name === this.schemaName) || this.schemas[0];

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

@@ -42,13 +42,13 @@ export class ReferenceDropdownComponent extends StatefulControlComponent<State,
     private isLoadingFailed = false;
 
     @Input()
-    public language: LanguageDto;
+    public language!: LanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
-    public schemaId: string;
+    public schemaId!: string;
 
     @Input()
     public mode: 'Array' | 'Single' = 'Single';

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

@@ -24,7 +24,7 @@ export class ReferenceItemComponent implements OnChanges {
     public clone = new EventEmitter();
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
     public canRemove?: boolean | null = true;
@@ -36,7 +36,7 @@ export class ReferenceItemComponent implements OnChanges {
     public isDisabled?: boolean | null;
 
     @Input()
-    public validations: { [id: string]: boolean };
+    public validations?: { [id: string]: boolean };
 
     @Input()
     public validityVisible?: boolean | null;
@@ -45,7 +45,7 @@ export class ReferenceItemComponent implements OnChanges {
     public columns = 0;
 
     @Input('sqxReferenceItem')
-    public content: ContentDto;
+    public content!: ContentDto;
 
     public get valid() {
         return !this.validations ? undefined : this.validations[this.content.id];

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

@@ -38,7 +38,7 @@ export class ReferencesCheckboxesComponent extends StatefulControlComponent<Stat
     public schemaId: string | undefined | null;
 
     @Input()
-    public language: LanguageDto;
+    public language!: LanguageDto;
 
     @Input()
     public set disabled(value: boolean | undefined | null) {

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

@@ -33,16 +33,16 @@ interface State {
 })
 export class ReferencesEditorComponent extends StatefulControlComponent<State, ReadonlyArray<string>> {
     @Input()
-    public schemaIds: ReadonlyArray<string>;
+    public schemaIds!: ReadonlyArray<string>;
 
     @Input()
-    public language: AppLanguageDto;
+    public language!: AppLanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()
-    public formContext: any;
+    public formContext!: any;
 
     @Input()
     public allowDuplicates?: boolean | null = true;

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

@@ -38,13 +38,13 @@ export class ReferencesTagsComponent extends StatefulControlComponent<State, Rea
     private isLoadingFailed = false;
 
     @Input()
-    public schemaId: string;
+    public schemaId!: string;
 
     @Input()
-    public language: LanguageDto;
+    public language!: LanguageDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
     public set disabled(value: boolean | undefined | null) {

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

@@ -17,10 +17,10 @@ import { ChartHelpers, ChartOptions } from './shared';
 })
 export class ApiCallsCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: CallsUsageDto;
+    public usage?: CallsUsageDto;
 
     public chartOptions = ChartOptions.Stacked;
     public chartData: any;

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

@@ -16,10 +16,10 @@ import { AppDto, CallsUsageDto } from '@app/shared';
 })
 export class ApiCallsSummaryCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: CallsUsageDto;
+    public usage?: CallsUsageDto;
 
     public callsMonth = 0;
     public callsAllowed = 0;

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

@@ -16,5 +16,5 @@ import { AppDto } from '@app/shared';
 })
 export class ApiCardComponent {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 }

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

@@ -17,10 +17,10 @@ import { ChartHelpers, ChartOptions } from './shared';
 })
 export class ApiPerformanceCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: CallsUsageDto;
+    public usage?: CallsUsageDto;
 
     @Input()
     public isStacked?: boolean | null;

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

@@ -17,10 +17,10 @@ import { ChartHelpers, ChartOptions } from './shared';
 })
 export class ApiTrafficCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: CallsUsageDto;
+    public usage?: CallsUsageDto;
 
     @Input()
     public isStacked?: boolean | null;

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

@@ -16,10 +16,10 @@ import { AppDto, CallsUsageDto } from '@app/shared';
 })
 export class ApiTrafficSummaryCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: CallsUsageDto;
+    public usage?: CallsUsageDto;
 
     public bytesMonth = 0;
     public bytesAllowed = 0;

frontend/app/features/dashboard/pages/cards/asset-uploads-count-card.component.ts

@@ -17,10 +17,10 @@ import { ChartHelpers, ChartOptions } from './shared';
 })
 export class AssetUploadsCountCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: ReadonlyArray<StorageUsagePerDateDto>;
+    public usage?: ReadonlyArray<StorageUsagePerDateDto>;
 
     public chartData: any;
     public chartOptions = ChartOptions.Default;

frontend/app/features/dashboard/pages/cards/asset-uploads-size-card.component.ts

@@ -17,10 +17,10 @@ import { ChartHelpers, ChartOptions } from './shared';
 })
 export class AssetUploadsSizeCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: ReadonlyArray<StorageUsagePerDateDto>;
+    public usage?: ReadonlyArray<StorageUsagePerDateDto>;
 
     public chartData: any;
     public chartOptions = ChartOptions.Default;

frontend/app/features/dashboard/pages/cards/asset-uploads-size-summary-card.component.ts

@@ -16,10 +16,10 @@ import { AppDto, CurrentStorageDto } from '@app/shared';
 })
 export class AssetUploadsSizeSummaryCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public usage: CurrentStorageDto;
+    public usage?: CurrentStorageDto;
 
     public storageCurrent = 0;
     public storageAllowed = 0;

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

@@ -14,17 +14,17 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-content-summary-card',
+    selector: 'sqx-content-summary-card[app]',
     styleUrls: ['./content-summary-card.component.scss'],
     templateUrl: './content-summary-card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContentSummaryCardComponent extends StatefulComponent<State> implements OnInit {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public options: any;
+    public options?: any;
 
     constructor(changeDetector: ChangeDetectorRef,
         private readonly contentsService: ContentsService,

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

@@ -16,5 +16,5 @@ import { AppDto } from '@app/shared';
 })
 export class GithubCardComponent {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 }

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

@@ -17,9 +17,9 @@ import { Observable } from 'rxjs';
 })
 export class HistoryCardComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
-    public history: Observable<ReadonlyArray<HistoryEventDto>>;
+    public history?: Observable<ReadonlyArray<HistoryEventDto>>;
 
     constructor(
         private readonly historyService: HistoryService,

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

@@ -16,13 +16,13 @@ import { AppDto } from '@app/shared';
 })
 export class IFrameCardComponent implements AfterViewInit {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
     public options: any;
 
     @ViewChild('iframe', { static: false })
-    public iframe: ElementRef<HTMLIFrameElement>;
+    public iframe!: ElementRef<HTMLIFrameElement>;
 
     public ngAfterViewInit() {
         this.iframe.nativeElement.src = this.options?.src;

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

@@ -16,5 +16,5 @@ import { AppDto } from '@app/shared';
 })
 export class SchemaCardComponent {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 }

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

@@ -16,5 +16,5 @@ import { AppDto } from '@app/shared';
 })
 export class SupportCardComponent {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 }

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

@@ -11,16 +11,16 @@ import { GridsterItem } from 'angular-gridster2';
 import { take } from 'rxjs/operators';
 
 @Component({
-    selector: 'sqx-dashboard-config',
+    selector: 'sqx-dashboard-config[app][config]',
     styleUrls: ['./dashboard-config.component.scss'],
     templateUrl: './dashboard-config.component.html',
 })
 export class DashboardConfigComponent implements OnChanges {
     @Input()
-    public app: AppDto;
+    public app!: AppDto;
 
     @Input()
-    public config: GridsterItem[];
+    public config!: GridsterItem[];
 
     @Input()
     public needsAttention?: boolean | null;
@@ -31,7 +31,7 @@ export class DashboardConfigComponent implements OnChanges {
     public configOptions: ReadonlyArray<GridsterItem>;
 
     public expertDialog = new DialogModel();
-    public expertConfig: GridsterItem[];
+    public expertConfig?: GridsterItem[];
 
     public dropdownModal = new ModalModel();
 

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

@@ -74,7 +74,7 @@
 
         <div class="dashboard-settings" *ngIf="grid">
             <sqx-dashboard-config [app]="app" [needsAttention]="isScrolled" 
-                [config]="gridConfig" 
+                [config]="gridConfig!" 
                 (configChange)="changeConfig($event)">
             </sqx-dashboard-config>
         </div>

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

@@ -19,18 +19,18 @@ import { GridsterComponent, GridsterConfig, GridsterItem, GridType } from 'angul
 })
 export class DashboardPageComponent extends ResourceOwner implements AfterViewInit, OnInit {
     @ViewChild('grid')
-    public grid: GridsterComponent;
+    public grid!: GridsterComponent;
 
     public selectedApp = this.appsState.selectedApp.pipe(defined());
 
-    public isStacked: boolean;
+    public isStacked = false;
 
-    public storageCurrent: CurrentStorageDto;
-    public storageUsage: ReadonlyArray<StorageUsagePerDateDto>;
+    public storageCurrent?: CurrentStorageDto;
+    public storageUsage?: ReadonlyArray<StorageUsagePerDateDto>;
 
-    public callsUsage: CallsUsageDto;
+    public callsUsage?: CallsUsageDto;
 
-    public gridConfig: GridsterItem[];
+    public gridConfig?: GridsterItem[];
     public gridOptions = DEFAULT_OPTIONS;
 
     public isScrolled = false;

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

@@ -16,10 +16,10 @@ import { RuleEventDto } from '@app/shared';
 })
 export class RuleEventComponent {
     @Input('sqxRuleEvent')
-    public event: RuleEventDto;
+    public event!: RuleEventDto;
 
     @Input()
-    public expanded: boolean;
+    public expanded = false;
 
     @Output()
     public expandedChange = new EventEmitter<any>();

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

@@ -17,7 +17,7 @@ type ComponentState<T> = { type: string; values: any; form: T };
     templateUrl: './rule-page.component.html',
 })
 export class RulePageComponent extends ResourceOwner implements OnInit {
-    public supportedActions: { [name: string]: RuleElementDto };
+    public supportedActions: { [name: string]: RuleElementDto } = {};
     public supportedTriggers = ALL_TRIGGERS;
 
     public rule?: RuleDto | null;
@@ -33,7 +33,7 @@ export class RulePageComponent extends ResourceOwner implements OnInit {
     }
 
     public get actionElement() {
-        return this.supportedActions[this.currentAction?.type || ''];
+        return this.supportedActions![this.currentAction?.type || ''];
     }
 
     public get triggerElement() {
@@ -86,14 +86,14 @@ export class RulePageComponent extends ResourceOwner implements OnInit {
     }
 
     public selectAction(type: string, values = {}) {
-        if (this.currentAction?.type !== type) {
+        if (this.currentAction?.type !== type && this.supportedActions) {
             const form = new ActionForm(this.supportedActions[type], type);
 
             this.currentAction = { form, type, values };
             this.currentAction.form.setEnabled(this.isEditable);
         }
 
-        this.currentAction.form.load(values);
+        this.currentAction!.form.load(values);
     }
 
     public selectTrigger(type: string, values = {}) {

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

@@ -16,13 +16,13 @@ import { ActionsDto, ModalModel, RuleDto, RulesState, TriggersDto } from '@app/s
 })
 export class RuleComponent {
     @Input()
-    public ruleTriggers: TriggersDto;
+    public ruleTriggers!: TriggersDto;
 
     @Input()
-    public ruleActions: ActionsDto;
+    public ruleActions!: ActionsDto;
 
     @Input()
-    public rule: RuleDto;
+    public rule!: RuleDto;
 
     public dropdown = new ModalModel();
 

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

@@ -14,7 +14,7 @@ import { ALL_TRIGGERS, RuleDto, RuleElementDto, RulesService, RulesState, Schema
     templateUrl: './rules-page.component.html',
 })
 export class RulesPageComponent implements OnInit {
-    public supportedActions: { [name: string]: RuleElementDto };
+    public supportedActions?: { [name: string]: RuleElementDto };
     public supportedTriggers = ALL_TRIGGERS;
 
     constructor(

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

@@ -35,10 +35,10 @@ const ERRORS_FAILED = [
 })
 export class SimulatedRuleEventComponent {
     @Input('sqxSimulatedRuleEvent')
-    public event: SimulatedRuleEventDto;
+    public event!: SimulatedRuleEventDto;
 
     @Input()
-    public expanded: boolean;
+    public expanded = false;
 
     @Output()
     public expandedChange = new EventEmitter<any>();

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

@@ -32,16 +32,16 @@ export class FormattableInputComponent implements ControlValueAccessor, AfterVie
     private value?: string;
 
     @Input()
-    public type: 'Text' | 'Code';
+    public type: 'Text' | 'Code' = 'Text';
 
     @Input()
     public formattable = true;
 
     @ViewChild(DefaultValueAccessor)
-    public inputEditor: DefaultValueAccessor;
+    public inputEditor!: DefaultValueAccessor;
 
     @ViewChild(CodeEditorComponent)
-    public codeEditor: CodeEditorComponent;
+    public codeEditor!: CodeEditorComponent;
 
     public disabled = false;
 

frontend/app/features/rules/shared/actions/generic-action.component.ts

@@ -16,5 +16,5 @@ import { ActionForm } from '@app/shared';
 })
 export class GenericActionComponent {
     @Input()
-    public actionForm: ActionForm;
+    public actionForm!: ActionForm;
 }

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

@@ -16,14 +16,14 @@ import { RuleElementDto } from '@app/shared';
 })
 export class RuleElementComponent {
     @Input()
-    public type: string;
+    public type!: string;
 
     @Input()
-    public element: RuleElementDto;
+    public element!: RuleElementDto;
 
     @Input()
     public isSmall?: boolean | null = true;
 
     @Input()
-    public disabled: boolean;
+    public disabled = false;
 }

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

@@ -9,14 +9,14 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { RuleElementDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-rule-icon',
+    selector: 'sqx-rule-icon[element]',
     styleUrls: ['./rule-icon.component.scss'],
     templateUrl: './rule-icon.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RuleIconComponent {
     @Input()
-    public element: RuleElementDto;
+    public element!: RuleElementDto;
 
     @Input()
     public size: 'sm' | 'md' | 'lg' = 'sm';

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

@@ -15,5 +15,5 @@ import { TriggerForm } from '@app/shared';
 })
 export class AssetChangedTriggerComponent {
     @Input()
-    public triggerForm: TriggerForm;
+    public triggerForm!: TriggerForm;
 }

frontend/app/features/rules/shared/triggers/comment-trigger.component.ts

@@ -15,5 +15,5 @@ import { TriggerForm } from '@app/shared';
 })
 export class CommentTriggerComponent {
     @Input()
-    public triggerForm: TriggerForm;
+    public triggerForm!: TriggerForm;
 }

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

@@ -24,15 +24,15 @@ export class ContentChangedTriggerComponent implements OnChanges {
     public schemas?: ReadonlyArray<SchemaDto> | null;
 
     @Input()
-    public trigger: any;
+    public trigger!: any;
 
     @Input()
-    public triggerForm: TriggerForm;
+    public triggerForm!: TriggerForm;
 
     public triggerSchemas: TriggerSchemaForm[] = [];
 
-    public schemaToAdd: SchemaDto;
-    public schemasToAdd: ReadonlyArray<SchemaDto>;
+    public schemaToAdd!: SchemaDto;
+    public schemasToAdd!: ReadonlyArray<SchemaDto>;
 
     public get hasSchema() {
         return !!this.schemaToAdd;

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

@@ -15,5 +15,5 @@ import { TriggerForm } from '@app/shared';
 })
 export class SchemaChangedTriggerComponent {
     @Input()
-    public triggerForm: TriggerForm;
+    public triggerForm!: TriggerForm;
 }

frontend/app/features/rules/shared/triggers/usage-trigger.component.ts

@@ -15,5 +15,5 @@ import { TriggerForm } from '@app/shared';
 })
 export class UsageTriggerComponent {
     @Input()
-    public triggerForm: TriggerForm;
+    public triggerForm!: TriggerForm;
 }

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

@@ -15,7 +15,7 @@ import { EditSchemaForm, SchemaDto, SchemasState } from '@app/shared';
 })
 export class SchemaEditFormComponent implements OnChanges {
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     public fieldForm = new EditSchemaForm();
 

frontend/app/features/schemas/pages/schema/export/schema-export-form.component.ts

@@ -15,7 +15,7 @@ import { SchemaDto, SchemasState, SynchronizeSchemaForm } from '@app/shared';
 })
 export class SchemaExportFormComponent implements OnChanges {
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     public synchronizeForm = new SynchronizeSchemaForm();
 

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

@@ -17,13 +17,13 @@ const DEFAULT_FIELD = { name: '', partitioning: 'invariant', properties: createP
 })
 export class FieldWizardComponent implements OnInit {
     @ViewChild('nameInput', { static: false })
-    public nameInput: ElementRef<HTMLElement>;
+    public nameInput!: ElementRef<HTMLElement>;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public settings: AppSettingsDto;
+    public settings!: AppSettingsDto;
 
     @Input()
     public parent: RootFieldDto | null | undefined;
@@ -36,7 +36,7 @@ export class FieldWizardComponent implements OnInit {
     }
 
     public fieldTypes = fieldTypes;
-    public field: FieldDto;
+    public field!: FieldDto;
 
     public addFieldForm = new AddFieldForm();
 

frontend/app/features/schemas/pages/schema/fields/field.component.ts

@@ -16,19 +16,19 @@ import { AppSettingsDto, createProperties, DialogModel, EditFieldForm, LanguageD
 })
 export class FieldComponent implements OnChanges {
     @Input()
-    public field: NestedFieldDto | RootFieldDto;
+    public field!: NestedFieldDto | RootFieldDto;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public parent: RootFieldDto;
+    public parent?: RootFieldDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
-    public settings: AppSettingsDto;
+    public settings!: AppSettingsDto;
 
     public get isLocalizable() {
         return (this.parent && this.parent.isLocalizable) || this.field['isLocalizable'];
@@ -41,7 +41,7 @@ export class FieldComponent implements OnChanges {
     public isEditing = false;
     public isEditable?: boolean | null;
 
-    public editForm: EditFieldForm;
+    public editForm!: EditFieldForm;
 
     public addFieldDialog = new DialogModel();
 

frontend/app/features/schemas/pages/schema/fields/forms/field-form-common.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, SchemaDto } from '@app/shared';
 })
 export class FieldFormCommonComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 }

frontend/app/features/schemas/pages/schema/fields/forms/field-form-ui.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, SchemaDto } from '@app/shared';
 })
 export class FieldFormUIComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 }

frontend/app/features/schemas/pages/schema/fields/forms/field-form-validation.component.ts

@@ -16,19 +16,19 @@ import { AppSettingsDto, FieldDto, LanguageDto, SchemaDto } from '@app/shared';
 })
 export class FieldFormValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public settings: AppSettingsDto;
+    public settings!: AppSettingsDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
     public isLocalizable?: boolean | null;

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

@@ -22,19 +22,19 @@ export class FieldFormComponent implements AfterViewInit {
     public isEditable?: boolean | null;
 
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public settings: AppSettingsDto;
+    public settings!: AppSettingsDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
     public isLocalizable?: boolean | null;

frontend/app/features/schemas/pages/schema/fields/schema-fields.component.ts

@@ -7,7 +7,7 @@
 
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Component, Input, OnInit } from '@angular/core';
-import { AppsState, DialogModel, FieldDto, fieldTypes, LanguagesState, SchemaDto, SchemasState, sorted } from '@app/shared';
+import { AppsState, DialogModel, FieldDto, fieldTypes, LanguagesState, RootFieldDto, SchemaDto, SchemasState, sorted } from '@app/shared';
 
 @Component({
     selector: 'sqx-schema-fields[schema]',
@@ -18,7 +18,7 @@ export class SchemaFieldsComponent implements OnInit {
     public fieldTypes = fieldTypes;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     public addFieldDialog = new DialogModel();
 
@@ -36,7 +36,7 @@ export class SchemaFieldsComponent implements OnInit {
         this.languageState.load();
     }
 
-    public sortFields(event: CdkDragDrop<ReadonlyArray<FieldDto>>) {
+    public sortFields(event: CdkDragDrop<ReadonlyArray<RootFieldDto>>) {
         this.schemasState.orderFields(this.schema, sorted(event)).subscribe();
     }
 

frontend/app/features/schemas/pages/schema/fields/types/array-validation.component.ts

@@ -16,13 +16,13 @@ import { ArrayFieldPropertiesDto, FieldDto, SchemaTagSource } from '@app/shared'
 })
 export class ArrayValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: ArrayFieldPropertiesDto;
+    public properties!: ArrayFieldPropertiesDto;
 
     constructor(
         public readonly schemasSource: SchemaTagSource,

frontend/app/features/schemas/pages/schema/fields/types/assets-ui.component.ts

@@ -16,11 +16,11 @@ import { AssetsFieldPropertiesDto, FieldDto } from '@app/shared';
 })
 export class AssetsUIComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: AssetsFieldPropertiesDto;
+    public properties!: AssetsFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/assets-validation.component.ts

@@ -10,22 +10,22 @@ import { FormGroup } from '@angular/forms';
 import { AssetsFieldPropertiesDto, FieldDto, LanguageDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-assets-validation[field][fieldForm][properties]',
+    selector: 'sqx-assets-validation[field][fieldForm][languages][properties]',
     styleUrls: ['assets-validation.component.scss'],
     templateUrl: 'assets-validation.component.html',
 })
 export class AssetsValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: AssetsFieldPropertiesDto;
+    public properties!: AssetsFieldPropertiesDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
     public isLocalizable?: boolean | null;

frontend/app/features/schemas/pages/schema/fields/types/boolean-ui.component.ts

@@ -18,11 +18,11 @@ export class BooleanUIComponent {
     public readonly editors = BOOLEAN_FIELD_EDITORS;
 
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: BooleanFieldPropertiesDto;
+    public properties!: BooleanFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/boolean-validation.component.ts

@@ -11,27 +11,27 @@ import { BooleanFieldPropertiesDto, FieldDto, hasNoValue$, LanguageDto } from '@
 import { Observable } from 'rxjs';
 
 @Component({
-    selector: 'sqx-boolean-validation[field][fieldForm][properties]',
+    selector: 'sqx-boolean-validation[field][fieldForm][languages][properties]',
     styleUrls: ['boolean-validation.component.scss'],
     templateUrl: 'boolean-validation.component.html',
 })
 export class BooleanValidationComponent implements OnChanges {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: BooleanFieldPropertiesDto;
+    public properties!: BooleanFieldPropertiesDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
     public isLocalizable?: boolean | null;
 
-    public showDefaultValue: Observable<boolean>;
+    public showDefaultValue?: Observable<boolean>;
 
     public ngOnChanges(changes: SimpleChanges) {
         if (changes['fieldForm']) {

frontend/app/features/schemas/pages/schema/fields/types/component-ui.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, ReferencesFieldPropertiesDto } from '@app/shared';
 })
 export class ComponentUIComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: ReferencesFieldPropertiesDto;
+    public properties!: ReferencesFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/component-validation.component.ts

@@ -16,13 +16,13 @@ import { FieldDto, ReferencesFieldPropertiesDto, SchemaTagSource } from '@app/sh
 })
 export class ComponentValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: ReferencesFieldPropertiesDto;
+    public properties!: ReferencesFieldPropertiesDto;
 
     constructor(
         public readonly schemasSource: SchemaTagSource,

frontend/app/features/schemas/pages/schema/fields/types/components-ui.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, ReferencesFieldPropertiesDto } from '@app/shared';
 })
 export class ComponentsUIComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: ReferencesFieldPropertiesDto;
+    public properties!: ReferencesFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/components-validation.component.ts

@@ -16,13 +16,13 @@ import { FieldDto, ReferencesFieldPropertiesDto, SchemaTagSource } from '@app/sh
 })
 export class ComponentsValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: ReferencesFieldPropertiesDto;
+    public properties!: ReferencesFieldPropertiesDto;
 
     constructor(
         public readonly schemasSource: SchemaTagSource,

frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.ts

@@ -19,11 +19,11 @@ export class DateTimeUIComponent {
     public readonly editors = DATETIME_FIELD_EDITORS;
 
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: DateTimeFieldPropertiesDto;
+    public properties!: DateTimeFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/date-time-validation.component.ts

@@ -13,28 +13,28 @@ import { Observable } from 'rxjs';
 const CALCULATED_DEFAULT_VALUES: ReadonlyArray<string> = ['Now', 'Today'];
 
 @Component({
-    selector: 'sqx-date-time-validation[field][fieldForm][properties]',
+    selector: 'sqx-date-time-validation[field][fieldForm][languages][properties]',
     styleUrls: ['date-time-validation.component.scss'],
     templateUrl: 'date-time-validation.component.html',
 })
 export class DateTimeValidationComponent implements OnChanges {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: DateTimeFieldPropertiesDto;
+    public properties!: DateTimeFieldPropertiesDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
     public isLocalizable?: boolean | null;
 
-    public showDefaultValues: Observable<boolean>;
-    public showDefaultValue: Observable<boolean>;
+    public showDefaultValues?: Observable<boolean>;
+    public showDefaultValue?: Observable<boolean>;
 
     public calculatedDefaultValues = CALCULATED_DEFAULT_VALUES;
 

frontend/app/features/schemas/pages/schema/fields/types/geolocation-ui.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, GeolocationFieldPropertiesDto } from '@app/shared';
 })
 export class GeolocationUIComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: GeolocationFieldPropertiesDto;
+    public properties!: GeolocationFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/geolocation-validation.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, GeolocationFieldPropertiesDto } from '@app/shared';
 })
 export class GeolocationValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: GeolocationFieldPropertiesDto;
+    public properties!: GeolocationFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/json-ui.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, JsonFieldPropertiesDto } from '@app/shared';
 })
 export class JsonUIComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: JsonFieldPropertiesDto;
+    public properties!: JsonFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/json-validation.component.ts

@@ -16,11 +16,11 @@ import { FieldDto, JsonFieldPropertiesDto } from '@app/shared';
 })
 export class JsonValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: JsonFieldPropertiesDto;
+    public properties!: JsonFieldPropertiesDto;
 }

frontend/app/features/schemas/pages/schema/fields/types/number-ui.component.ts

@@ -20,16 +20,16 @@ export class NumberUIComponent extends ResourceOwner implements OnChanges {
     public readonly editors = NUMBER_FIELD_EDITORS;
 
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public properties: NumberFieldPropertiesDto;
+    public properties!: NumberFieldPropertiesDto;
 
-    public hideAllowedValues: Observable<boolean>;
-    public hideInlineEditable: Observable<boolean>;
+    public hideAllowedValues?: Observable<boolean>;
+    public hideInlineEditable?: Observable<boolean>;
 
     public ngOnChanges(changes: SimpleChanges) {
         if (changes['fieldForm']) {

frontend/app/features/schemas/pages/schema/fields/types/number-validation.component.ts

@@ -10,25 +10,25 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, LanguageDto, NumberFieldPropertiesDto, RootFieldDto, SchemaDto, Types } from '@app/shared';
 
 @Component({
-    selector: 'sqx-number-validation[field][fieldForm][properties][schema]',
+    selector: 'sqx-number-validation[field][fieldForm][languages][properties][schema]',
     styleUrls: ['number-validation.component.scss'],
     templateUrl: 'number-validation.component.html',
 })
 export class NumberValidationComponent {
     @Input()
-    public fieldForm: FormGroup;
+    public fieldForm!: FormGroup;
 
     @Input()
-    public field: FieldDto;
+    public field!: FieldDto;
 
     @Input()
-    public schema: SchemaDto;
+    public schema!: SchemaDto;
 
     @Input()
-    public properties: NumberFieldPropertiesDto;
+    public properties!: NumberFieldPropertiesDto;
 
     @Input()
-    public languages: ReadonlyArray<LanguageDto>;
+    public languages!: ReadonlyArray<LanguageDto>;
 
     @Input()
     public isLocalizable?: boolean | null;