Refactoring/angular (#740)

* References updated.

* Styling fixes.

* Style fixes.

* Fix selector.

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

@@ -36,10 +36,13 @@ export class RestorePageComponent {
             this.restoreForm.submitCompleted();
 
             this.backupsService.postRestore(value)
-                .subscribe(() => {
-                    this.dialogs.notifyInfo('i18n:backups.restoreStarted');
-                }, error => {
-                    this.dialogs.notifyError(error);
+                .subscribe({
+                    next: () => {
+                        this.dialogs.notifyInfo('i18n:backups.restoreStarted');
+                    },
+                    error: error => {
+                        this.dialogs.notifyError(error);
+                    },
                 });
         }
     }

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

@@ -56,17 +56,23 @@ export class UserPageComponent extends ResourceOwner implements OnInit {
         if (value) {
             if (this.user) {
                 this.usersState.update(this.user, value)
-                    .subscribe(user => {
-                        this.userForm.submitCompleted({ newValue: user });
-                    }, error => {
-                        this.userForm.submitFailed(error);
+                    .subscribe({
+                        next: user => {
+                            this.userForm.submitCompleted({ newValue: user });
+                        },
+                        error: error => {
+                            this.userForm.submitFailed(error);
+                        },
                     });
             } else {
                 this.usersState.create(<CreateUserDto>value)
-                    .subscribe(() => {
-                        this.back();
-                    }, error => {
-                        this.userForm.submitFailed(error);
+                    .subscribe({
+                        next: () => {
+                            this.back();
+                        },
+                        error: error => {
+                            this.userForm.submitFailed(error);
+                        },
                     });
             }
         }

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { AppDto, fadeAnimation, ModalModel } from '@app/shared';
 
 @Component({
-    selector: 'sqx-app',
+    selector: 'sqx-app[app]',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html',
     animations: [

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

@@ -48,6 +48,10 @@
 
             a {
                 text-decoration: none;
+
+                &:hover {
+                    text-decoration: underline;
+                }
             }
         }
 

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

@@ -9,7 +9,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FeatureDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-news-dialog',
+    selector: 'sqx-news-dialog[features]',
     styleUrls: ['./news-dialog.component.scss'],
     templateUrl: './news-dialog.component.html',
 })

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

@@ -11,7 +11,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { TagItem, TagsSelected } from '@app/shared';
 
 @Component({
-    selector: 'sqx-asset-tags',
+    selector: 'sqx-asset-tags[tags][tagsSelected]',
     styleUrls: ['./asset-tags.component.scss'],
     templateUrl: './asset-tags.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

frontend/app/features/content/declarations.ts

@@ -20,25 +20,17 @@ export * from './pages/contents/custom-view-editor.component';
 export * from './pages/schemas/schemas-page.component';
 export * from './pages/sidebar/sidebar-page.component';
 export * from './shared/content-extension.component';
-export * from './shared/content-status.component';
 export * from './shared/due-time-selector.component';
 export * from './shared/forms/array-editor.component';
 export * from './shared/forms/array-item.component';
-export * from './shared/forms/component.component';
-export * from './shared/forms/component-section.component';
 export * from './shared/forms/assets-editor.component';
+export * from './shared/forms/component-section.component';
+export * from './shared/forms/component.component';
 export * from './shared/forms/field-editor.component';
 export * from './shared/forms/iframe-editor.component';
 export * from './shared/forms/stock-photo-editor.component';
-export * from './shared/list/content-list-cell.directive';
-export * from './shared/list/content-list-field.component';
-export * from './shared/list/content-list-header.component';
-export * from './shared/list/content-value-editor.component';
-export * from './shared/list/content-value.component';
 export * from './shared/list/content.component';
 export * from './shared/preview-button.component';
 export * from './shared/references/content-creator.component';
-export * from './shared/references/content-selector-item.component';
-export * from './shared/references/content-selector.component';
 export * from './shared/references/reference-item.component';
 export * from './shared/references/references-editor.component';

frontend/app/features/content/module.ts

@@ -10,7 +10,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { CanDeactivateGuard, ContentMustExistGuard, LoadLanguagesGuard, LoadSchemasGuard, SchemaMustExistPublishedGuard, SchemaMustNotBeSingletonGuard, SqxFrameworkModule, SqxSharedModule } from '@app/shared';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { ScrollingModule as ScrollingModuleExperimental } from '@angular/cdk-experimental/scrolling';
-import { ArrayEditorComponent, ArrayItemComponent, AssetsEditorComponent, CommentsPageComponent, ComponentComponent, ComponentSectionComponent, ContentComponent, ContentCreatorComponent, ContentEditorComponent, ContentEventComponent, ContentExtensionComponent, ContentFieldComponent, ContentHistoryPageComponent, ContentListCellDirective, ContentListFieldComponent, ContentListHeaderComponent, ContentListWidthPipe, ContentPageComponent, ContentReferencesComponent, ContentsColumnsPipe, ContentSectionComponent, ContentSelectorComponent, ContentSelectorItemComponent, ContentsFiltersPageComponent, ContentsPageComponent, ContentStatusComponent, ContentValueComponent, ContentValueEditorComponent, CustomViewEditorComponent, DueTimeSelectorComponent, FieldEditorComponent, FieldLanguagesComponent, IFrameEditorComponent, PreviewButtonComponent, ReferenceItemComponent, ReferencesEditorComponent, SchemasPageComponent, SidebarPageComponent, StockPhotoEditorComponent } from './declarations';
+import { ArrayEditorComponent, ArrayItemComponent, AssetsEditorComponent, CommentsPageComponent, ComponentComponent, ComponentSectionComponent, ContentComponent, ContentCreatorComponent, ContentEditorComponent, ContentEventComponent, ContentExtensionComponent, ContentFieldComponent, ContentHistoryPageComponent, ContentPageComponent, ContentReferencesComponent, ContentSectionComponent, ContentsFiltersPageComponent, ContentsPageComponent, CustomViewEditorComponent, DueTimeSelectorComponent, FieldEditorComponent, FieldLanguagesComponent, IFrameEditorComponent, PreviewButtonComponent, ReferenceItemComponent, ReferencesEditorComponent, SchemasPageComponent, SidebarPageComponent, StockPhotoEditorComponent } from './declarations';
 
 const routes: Routes = [
     {
@@ -89,29 +89,19 @@ const routes: Routes = [
         AssetsEditorComponent,
         CommentsPageComponent,
         ComponentComponent,
+        ContentCreatorComponent,
         ComponentSectionComponent,
         ContentComponent,
-        ContentCreatorComponent,
         ContentEditorComponent,
         ContentEventComponent,
         ContentExtensionComponent,
         ContentFieldComponent,
         ContentHistoryPageComponent,
-        ContentListCellDirective,
-        ContentListFieldComponent,
-        ContentListHeaderComponent,
-        ContentListWidthPipe,
         ContentPageComponent,
         ContentReferencesComponent,
-        ContentsColumnsPipe,
         ContentSectionComponent,
-        ContentSelectorComponent,
-        ContentSelectorItemComponent,
         ContentsFiltersPageComponent,
         ContentsPageComponent,
-        ContentStatusComponent,
-        ContentValueComponent,
-        ContentValueEditorComponent,
         CustomViewEditorComponent,
         DueTimeSelectorComponent,
         FieldEditorComponent,

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
 import { ContentDto, HistoryEventDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-event',
+    selector: 'sqx-content-event[content][event]',
     styleUrls: ['./content-event.component.scss'],
     templateUrl: './content-event.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -167,10 +167,13 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
                 }
 
                 this.contentsState.update(this.content, value)
-                    .subscribe(() => {
-                        this.contentForm.submitCompleted({ noReset: true });
-                    }, error => {
-                        this.contentForm.submitFailed(error);
+                    .subscribe({
+                        next: () => {
+                            this.contentForm.submitCompleted({ noReset: true });
+                        },
+                        error: error => {
+                            this.contentForm.submitFailed(error);
+                        },
                     });
             } else {
                 if (!this.canCreate(publish)) {
@@ -178,12 +181,13 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
                 }
 
                 this.contentsState.create(value, publish)
-                    .subscribe(() => {
-                        this.contentForm.submitCompleted({ noReset: true });
-
-                        this.back();
-                    }, error => {
-                        this.contentForm.submitFailed(error);
+                    .subscribe({
+                        next: () => {
+                            this.contentForm.submitCompleted({ noReset: true });
+                        },
+                        error: error => {
+                            this.contentForm.submitFailed(error);
+                        },
                     });
             }
         } else {

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

@@ -9,7 +9,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { AppLanguageDto, EditContentForm, FieldForm, FieldSection, RootFieldDto, SchemaDto, Version } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-editor',
+    selector: 'sqx-content-editor[contentForm][formContext][language][languages][schema]',
     styleUrls: ['./content-editor.component.scss'],
     templateUrl: './content-editor.component.html',
 })
@@ -36,10 +36,10 @@ export class ContentEditorComponent {
     public formContext: any;
 
     @Input()
-    public languages: ReadonlyArray<AppLanguageDto>;
+    public language: AppLanguageDto;
 
     @Input()
-    public language: 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.html

@@ -81,7 +81,9 @@
         
             <ng-template #singleControlCompare>
                 <sqx-field-editor
+                    [form]="formCompare"
                     [formModel]="getControlCompare()!"
+                    [formContext]="formContext"
                     [language]="language"
                     [languages]="languages">
                 </sqx-field-editor>

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

@@ -11,7 +11,7 @@ import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
-    selector: 'sqx-content-field',
+    selector: 'sqx-content-field[form][formContext][formModel][language][languages][schema]',
     styleUrls: ['./content-field.component.scss'],
     templateUrl: './content-field.component.html',
 })

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

@@ -14,7 +14,7 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-content-section',
+    selector: 'sqx-content-section[form][formContext][formSection][language][languages][schema]',
     styleUrls: ['./content-section.component.scss'],
     templateUrl: './content-section.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -12,8 +12,8 @@
     <ng-container *ngIf="field.properties.isComplexUI || !showAllControls">
         <div class="button-container">
             <sqx-language-selector size="sm" #buttonLanguages
-                [selectedLanguage]="language"
-                (selectedLanguageChange)="languageChange.emit($event)"
+                (languageChange)="languageChange.emit($event)"
+                [language]="language"
                 [languages]="languages">
             </sqx-language-selector>
         </div>

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { AppLanguageDto, RootFieldDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-languages',
+    selector: 'sqx-field-languages[field][language][languages]',
     styleUrls: ['./field-languages.component.scss'],
     templateUrl: './field-languages.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
 import { AppLanguageDto, ComponentContentsState, ContentDto, QuerySynchronizer, Router2State } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-references',
+    selector: 'sqx-content-references[content][language][languages]',
     styleUrls: ['./content-references.component.scss'],
     templateUrl: './content-references.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -13,16 +13,17 @@
             <div class="col">
                 <sqx-search-form formClass="form" placeholder="{{ 'contents.searchPlaceholder' | sqxTranslate }}"
                     (queryChange)="search($event)"
-                    [query]="contentsState.query | async"
+                    [enableShortcut]="true"
+                    [language]="(languagesState.isoMasterLanguage | async)!"
+                    [languages]="languages"
                     [queries]="queries | async"
                     [queriesTypes]="'common.contents' | sqxTranslate"
-                    [queryModel]="queryModel | async"
-                    [language]="(languagesState.isoMasterLanguage | async)!"
-                    [enableShortcut]="true">
+                    [query]="contentsState.query | async"
+                    [queryModel]="queryModel | async">
                 </sqx-search-form>
             </div>
             <div class="col-auto" *ngIf="languages.length > 1">
-                <sqx-language-selector class="languages-buttons" [(selectedLanguage)]="language" [languages]="languages"></sqx-language-selector>
+                <sqx-language-selector class="languages-buttons" [(language)]="language" [languages]="languages"></sqx-language-selector>
             </div>
             <div class="col-auto">
                 <button type="button" class="btn btn-success" routerLink="new" title="i18n:contents.createContentTooltip" shortcut="CTRL + U" [disabled]="(contentsState.canCreateAny | async) === false">
@@ -62,7 +63,8 @@
 
                         <ng-container *sqxModal="tableViewModal">
                             <div class="dropdown-menu" [sqxAnchoredTo]="buttonSettings" @fade position="bottom-right">
-                                <sqx-custom-view-editor [allFields]="tableView.allFields" 
+                                <sqx-custom-view-editor
+                                    [allFields]="tableView.allFields" 
                                     (fieldNamesChange)="tableView.updateFields($event)"
                                     [fieldNames]="$any(tableView.listFieldNames | async)">
                                 </sqx-custom-view-editor>
@@ -105,15 +107,15 @@
                         <table class="table table-items table-fixed" [style.minWidth]="listFields | sqxContentListWidth" [sqxSyncWidth]="header">
                             <tbody *ngFor="let content of contentsState.contents | async; trackBy: trackByContent" 
                                 [sqxContent]="content"
+                                (clone)="clone(content)"
                                 (delete)="delete(content)"
-                                [selected]="isItemSelected(content)"
                                 (selectedChange)="selectItem(content, $event)"
                                 (statusChange)="changeStatus(content, $event)"
                                 [cloneable]="contentsState.snapshot.canCreate"
-                                (clone)="clone(content)"
                                 [language]="language"
                                 [link]="[content.id, 'history']"
-                                [listFields]="listFields">
+                                [listFields]="listFields"
+                                [selected]="isItemSelected(content)">
                             </tbody>
                         </table>
                     </div>

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

@@ -9,7 +9,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 
 @Component({
-    selector: 'sqx-custom-view-editor',
+    selector: 'sqx-custom-view-editor[allFields][fieldNames]',
     styleUrls: ['./custom-view-editor.component.scss'],
     templateUrl: './custom-view-editor.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -11,7 +11,7 @@ import { ApiUrlConfig, ResourceOwner, Types } from '@app/framework/internal';
 import { AppsState, AuthService, computeEditorUrl, ContentDto, SchemaDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-extension',
+    selector: 'sqx-content-extension[content][contentSchema]',
     styleUrls: ['./content-extension.component.scss'],
     templateUrl: './content-extension.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -13,7 +13,7 @@ import { map } from 'rxjs/operators';
 import { ArrayItemComponent } from './array-item.component';
 
 @Component({
-    selector: 'sqx-array-editor',
+    selector: 'sqx-array-editor[form][formContext][formModel][language][languages]',
     styleUrls: ['./array-editor.component.scss'],
     templateUrl: './array-editor.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -17,7 +17,7 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-array-item',
+    selector: 'sqx-array-item[form][formContext][language][languages][index]',
     styleUrls: ['./array-item.component.scss'],
     templateUrl: './array-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -50,7 +50,7 @@ export class AssetsEditorComponent extends StatefulControlComponent<State, Reado
     public folderId?: string;
 
     @Input()
-    public set disabled(value: boolean | null | undefined) {
+    public set disabled(value: boolean | undefined | null) {
         this.setDisabledState(value === true);
     }
 

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

@@ -10,7 +10,7 @@ import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, FieldSe
 import { FieldEditorComponent } from './field-editor.component';
 
 @Component({
-    selector: 'sqx-component-section',
+    selector: 'sqx-component-section[form][formContext][formSection][language][languages]',
     styleUrls: ['./component-section.component.scss'],
     templateUrl: './component-section.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -32,7 +32,7 @@ export class ComponentSectionComponent {
     public languages: ReadonlyArray<AppLanguageDto>;
 
     @Input()
-    public index: number;
+    public index: number | null | undefined;
 
     @Input()
     public canUnset?: boolean | null;

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

@@ -10,7 +10,7 @@ import { AppLanguageDto, ComponentFieldPropertiesDto, ComponentForm, EditContent
 import { ComponentSectionComponent } from './component-section.component';
 
 @Component({
-    selector: 'sqx-component',
+    selector: 'sqx-component[form][formContext][formModel][language][languages]',
     styleUrls: ['./component.component.scss'],
     templateUrl: './component.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -112,11 +112,11 @@
                             </sqx-references-editor>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Dropdown'">
-                            <sqx-references-dropdown
+                            <sqx-reference-dropdown
                                 [formControl]="editorControl" 
                                 [language]="language"
 								[schemaId]="field.rawProperties.singleId">
-                            </sqx-references-dropdown>
+                            </sqx-reference-dropdown>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Tags'">
                             <sqx-references-tags

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

@@ -12,7 +12,7 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
-    selector: 'sqx-field-editor',
+    selector: 'sqx-field-editor[form][formContext][formModel][language][languages]',
     styleUrls: ['./field-editor.component.scss'],
     templateUrl: './field-editor.component.html',
 })
@@ -33,7 +33,7 @@ export class FieldEditorComponent implements OnChanges {
     public languages: ReadonlyArray<AppLanguageDto>;
 
     @Input()
-    public index: number;
+    public index: number | null | undefined;
 
     @Input()
     public canUnset?: boolean | null;

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

@@ -21,7 +21,7 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-iframe-editor',
+    selector: 'sqx-iframe-editor[context][formValue]',
     styleUrls: ['./iframe-editor.component.scss'],
     templateUrl: './iframe-editor.component.html',
     providers: [
@@ -56,7 +56,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
     public language?: string | null;
 
     @Input()
-    public set disabled(value: boolean | null | undefined) {
+    public set disabled(value: boolean | undefined | null) {
         this.setDisabledState(value === true);
     }
 

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

@@ -34,7 +34,7 @@ interface State {
 })
 export class StockPhotoEditorComponent extends StatefulControlComponent<State, string> implements OnInit {
     @Input()
-    public set disabled(value: boolean | null | undefined) {
+    public set disabled(value: boolean | undefined | null) {
         this.setDisabledState(value === true);
     }
 

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

@@ -6,13 +6,12 @@
  */
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
-import { AppLanguageDto, ContentDto, ContentsState, fadeAnimation, ModalModel, PatchContentForm, RootFieldDto, TableField, Types } from '@app/shared';
-import { ContentListFieldComponent } from './content-list-field.component';
+import { AppLanguageDto, ContentDto, ContentListFieldComponent, ContentsState, fadeAnimation, ModalModel, PatchContentForm, RootFieldDto, TableField, Types } from '@app/shared';
 
 /* tslint:disable: component-selector */
 
 @Component({
-    selector: '[sqxContent]',
+    selector: '[sqxContent][language][listFields]',
     styleUrls: ['./content.component.scss'],
     templateUrl: './content.component.html',
     animations: [
@@ -88,14 +87,17 @@ export class ContentComponent implements OnChanges {
 
         if (value) {
             this.contentsState.patch(this.content, value)
-                .subscribe(() => {
-                    this.patchForm.submitCompleted({ noReset: true });
+                .subscribe({
+                    next: () => {
+                        this.patchForm.submitCompleted({ noReset: true });
 
-                    this.changeDetector.markForCheck();
-                }, error => {
-                    this.patchForm.submitFailed(error);
+                        this.changeDetector.markForCheck();
+                    },
+                    error: error => {
+                        this.patchForm.submitFailed(error);
 
-                    this.changeDetector.markForCheck();
+                        this.changeDetector.markForCheck();
+                    },
                 });
         }
     }

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

@@ -19,7 +19,7 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-preview-button',
+    selector: 'sqx-preview-button[content][schema]',
     styleUrls: ['./preview-button.component.scss'],
     templateUrl: './preview-button.component.html',
     animations: [

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

@@ -11,7 +11,7 @@
         <div class="row gx-2 mt-3 mb-3">
             <div class="col-auto">          
                 <div *ngIf="schema && languages.length > 1">
-                    <sqx-language-selector class="languages-buttons" [(selectedLanguage)]="language!" [languages]="languages"></sqx-language-selector>
+                    <sqx-language-selector class="languages-buttons" [(language)]="language" [languages]="languages"></sqx-language-selector>
                 </div>
             </div>
 

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

@@ -9,7 +9,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AppLanguageDto, ComponentContentsState, ContentDto, EditContentForm, ResourceOwner, SchemaDto, SchemasState } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-creator',
+    selector: 'sqx-content-creator[formContext][language][languages]',
     styleUrls: ['./content-creator.component.scss'],
     templateUrl: './content-creator.component.html',
     providers: [
@@ -94,12 +94,15 @@ export class ContentCreatorComponent extends ResourceOwner implements OnInit {
             }
 
             this.contentsState.create(value, publish)
-                .subscribe(content => {
-                    this.contentForm.submitCompleted({ noReset: true });
-
-                    this.emitSelect(content);
-                }, error => {
-                    this.contentForm.submitFailed(error);
+                .subscribe({
+                    next: content => {
+                        this.contentForm.submitCompleted({ noReset: true });
+
+                        this.emitSelect(content);
+                    },
+                    error: error => {
+                        this.contentForm.submitFailed(error);
+                    },
                 });
         } else {
             this.contentForm.submitFailed('i18n:contents.contentNotValid');

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

@@ -17,7 +17,7 @@
     </td>
 
     <td sqxContentListCell="meta.status.color">
-        <sqx-content-list-field field="meta.status.color" [content]="content"></sqx-content-list-field>
+        <sqx-content-list-field [language]="language" field="meta.status.color" [content]="content"></sqx-content-list-field>
     </td>
 
     <td class="cell-label" *ngIf="!isCompact">

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

@@ -11,7 +11,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
 import { AppLanguageDto, ContentDto, getContentValue } from '@app/shared';
 
 @Component({
-    selector: '[sqxReferenceItem]',
+    selector: '[sqxReferenceItem][language]',
     styleUrls: ['./reference-item.component.scss'],
     templateUrl: './reference-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -23,7 +23,7 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-references-editor',
+    selector: 'sqx-references-editor[formContext][language][languages][schemaIds]',
     styleUrls: ['./references-editor.component.scss'],
     templateUrl: './references-editor.component.html',
     providers: [
@@ -48,7 +48,7 @@ export class ReferencesEditorComponent extends StatefulControlComponent<State, R
     public allowDuplicates?: boolean | null = true;
 
     @Input()
-    public set disabled(value: boolean | null | undefined) {
+    public set disabled(value: boolean | undefined | null) {
         this.setDisabledState(value === true);
     }
 
@@ -70,14 +70,17 @@ export class ReferencesEditorComponent extends StatefulControlComponent<State, R
                 const contentIds: string[] = obj;
 
                 this.contentsService.getContentsByIds(this.appsState.appName, contentIds)
-                    .subscribe(dtos => {
-                        this.setContentItems(contentIds.map(id => dtos.items.find(c => c.id === id)!).filter(r => !!r));
-
-                        if (this.snapshot.contentItems.length !== contentIds.length) {
-                            this.updateValue();
-                        }
-                    }, () => {
-                        this.setContentItems([]);
+                    .subscribe({
+                        next: dtos => {
+                            this.setContentItems(contentIds.map(id => dtos.items.find(c => c.id === id)!).filter(r => !!r));
+
+                            if (this.snapshot.contentItems.length !== contentIds.length) {
+                                this.updateValue();
+                            }
+                        },
+                        error: () => {
+                            this.setContentItems([]);
+                        },
                     });
             }
         } else {

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

@@ -10,7 +10,7 @@ import { AppDto, CallsUsageDto, fadeAnimation, UsagesService } from '@app/shared
 import { ChartHelpers, ChartOptions } from './shared';
 
 @Component({
-    selector: 'sqx-api-calls-card',
+    selector: 'sqx-api-calls-card[app][usage]',
     styleUrls: ['./api-calls-card.component.scss'],
     templateUrl: './api-calls-card.component.html',
     animations: [

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { AppDto, CallsUsageDto, fadeAnimation } from '@app/shared';
 
 @Component({
-    selector: 'sqx-api-calls-summary-card',
+    selector: 'sqx-api-calls-summary-card[app][usage]',
     styleUrls: ['./api-calls-summary-card.component.scss'],
     templateUrl: './api-calls-summary-card.component.html',
     animations: [

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

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

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

@@ -10,7 +10,7 @@ import { AppDto, CallsUsageDto, fadeAnimation } from '@app/shared';
 import { ChartHelpers, ChartOptions } from './shared';
 
 @Component({
-    selector: 'sqx-api-performance-card',
+    selector: 'sqx-api-performance-card[app][usage]',
     styleUrls: ['./api-performance-card.component.scss'],
     templateUrl: './api-performance-card.component.html',
     animations: [

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

@@ -10,7 +10,7 @@ import { AppDto, CallsUsageDto, fadeAnimation } from '@app/shared';
 import { ChartHelpers, ChartOptions } from './shared';
 
 @Component({
-    selector: 'sqx-api-traffic-card',
+    selector: 'sqx-api-traffic-card[app][usage]',
     styleUrls: ['./api-traffic-card.component.scss'],
     templateUrl: './api-traffic-card.component.html',
     animations: [

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { AppDto, CallsUsageDto, fadeAnimation } from '@app/shared';
 
 @Component({
-    selector: 'sqx-api-traffic-summary-card',
+    selector: 'sqx-api-traffic-summary-card[app][usage]',
     styleUrls: ['./api-traffic-summary-card.component.scss'],
     templateUrl: './api-traffic-summary-card.component.html',
     animations: [

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

@@ -10,7 +10,7 @@ import { AppDto, fadeAnimation, StorageUsagePerDateDto } from '@app/shared';
 import { ChartHelpers, ChartOptions } from './shared';
 
 @Component({
-    selector: 'sqx-asset-uploads-count-card',
+    selector: 'sqx-asset-uploads-count-card[app][usage]',
     styleUrls: ['./asset-uploads-count-card.component.scss'],
     templateUrl: './asset-uploads-count-card.component.html',
     animations: [

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

@@ -10,7 +10,7 @@ import { AppDto, fadeAnimation, StorageUsagePerDateDto } from '@app/shared';
 import { ChartHelpers, ChartOptions } from './shared';
 
 @Component({
-    selector: 'sqx-asset-uploads-size-card',
+    selector: 'sqx-asset-uploads-size-card[app][usage]',
     styleUrls: ['./asset-uploads-size-card.component.scss'],
     templateUrl: './asset-uploads-size-card.component.html',
     animations: [

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { AppDto, CurrentStorageDto, fadeAnimation } from '@app/shared';
 
 @Component({
-    selector: 'sqx-asset-uploads-size-summary-card',
+    selector: 'sqx-asset-uploads-size-summary-card[app][usage]',
     styleUrls: ['./asset-uploads-size-summary-card.component.scss'],
     templateUrl: './asset-uploads-size-summary-card.component.html',
     animations: [

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

@@ -51,11 +51,13 @@ export class ContentSummaryCardComponent extends StatefulComponent<State> implem
         query.take = 0;
 
         this.contentsService.getContents(this.app.name, this.options.schema, { query })
-            .subscribe(({ total: itemCount }) => {
-                this.next({ itemCount });
-            },
-            () => {
-                this.next({ itemCount: 0 });
+            .subscribe({
+                next: ({ total: itemCount }) => {
+                    this.next({ itemCount });
+                },
+                error: () => {
+                    this.next({ itemCount: 0 });
+                },
             });
     }
 }

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AppDto, fadeAnimation } from '@app/shared';
 
 @Component({
-    selector: 'sqx-github-card',
+    selector: 'sqx-github-card[app]',
     styleUrls: ['./github-card.component.scss'],
     templateUrl: './github-card.component.html',
     animations: [

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

@@ -10,7 +10,7 @@ import { AppDto, fadeAnimation, HistoryEventDto, HistoryService } from '@app/sha
 import { Observable } from 'rxjs';
 
 @Component({
-    selector: 'sqx-history-card',
+    selector: 'sqx-history-card[app]',
     styleUrls: ['./history-card.component.scss'],
     templateUrl: './history-card.component.html',
     animations: [

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

@@ -9,7 +9,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, V
 import { AppDto, fadeAnimation } from '@app/shared';
 
 @Component({
-    selector: 'sqx-iframe-card',
+    selector: 'sqx-iframe-card[app]',
     styleUrls: ['./iframe-card.component.scss'],
     templateUrl: './iframe-card.component.html',
     animations: [
@@ -18,15 +18,15 @@ import { AppDto, fadeAnimation } from '@app/shared';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IFrameCardComponent implements AfterViewInit {
-    @ViewChild('iframe', { static: false })
-    public iframe: ElementRef<HTMLIFrameElement>;
-
     @Input()
     public app: AppDto;
 
     @Input()
     public options: any;
 
+    @ViewChild('iframe', { static: false })
+    public iframe: ElementRef<HTMLIFrameElement>;
+
     public ngAfterViewInit() {
         this.iframe.nativeElement.src = this.options?.src;
     }

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AppDto, fadeAnimation } from '@app/shared';
 
 @Component({
-    selector: 'sqx-schema-card',
+    selector: 'sqx-schema-card[app]',
     styleUrls: ['./schema-card.component.scss'],
     templateUrl: './schema-card.component.html',
     animations: [

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { AppDto, fadeAnimation } from '@app/shared';
 
 @Component({
-    selector: 'sqx-support-card',
+    selector: 'sqx-support-card[app]',
     styleUrls: ['./support-card.component.scss'],
     templateUrl: './support-card.component.html',
     animations: [

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActionsDto, fadeAnimation, ModalModel, RuleDto, RulesState, TriggersDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-rule',
+    selector: 'sqx-rule[rule][ruleActions][ruleTriggers]',
     styleUrls: ['./rule.component.scss'],
     templateUrl: './rule.component.html',
     animations: [

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

@@ -18,7 +18,7 @@ type TemplateMode = 'Text' | 'Script' | 'Liquid';
 const MODES: ReadonlyArray<TemplateMode> = ['Text', 'Script', 'Liquid'];
 
 @Component({
-    selector: 'sqx-formattable-input',
+    selector: 'sqx-formattable-input[type]',
     styleUrls: ['./formattable-input.component.scss'],
     templateUrl: './formattable-input.component.html',
     providers: [

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActionForm } from '@app/shared';
 
 @Component({
-    selector: 'sqx-generic-action',
+    selector: 'sqx-generic-action[actionForm]',
     styleUrls: ['./generic-action.component.scss'],
     templateUrl: './generic-action.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { RuleElementDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-rule-element',
+    selector: 'sqx-rule-element[element][type]',
     styleUrls: ['./rule-element.component.scss'],
     templateUrl: './rule-element.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -9,14 +9,11 @@ import { Component, Input } from '@angular/core';
 import { TriggerForm } from '@app/shared';
 
 @Component({
-    selector: 'sqx-asset-changed-trigger',
+    selector: 'sqx-asset-changed-trigger[triggerForm]',
     styleUrls: ['./asset-changed-trigger.component.scss'],
     templateUrl: './asset-changed-trigger.component.html',
 })
 export class AssetChangedTriggerComponent {
-    @Input()
-    public trigger: any;
-
     @Input()
     public triggerForm: TriggerForm;
 }

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

@@ -9,14 +9,11 @@ import { Component, Input } from '@angular/core';
 import { TriggerForm } from '@app/shared';
 
 @Component({
-    selector: 'sqx-comment-trigger',
+    selector: 'sqx-comment-trigger[triggerForm]',
     styleUrls: ['./comment-trigger.component.scss'],
     templateUrl: './comment-trigger.component.html',
 })
 export class CommentTriggerComponent {
-    @Input()
-    public trigger: any;
-
     @Input()
     public triggerForm: TriggerForm;
 }

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

@@ -1,9 +1,9 @@
 <ng-container *ngIf="!triggerForm.form.controls.handleAll.value">
     <table class="table table-middle table-sm table-fixed table-borderless">
         <colgroup>
-            <col style="width: 40%" />
-            <col style="width: 60%" />
-            <col style="width: 40px" />
+            <col style="width: 40%;" />
+            <col style="width: 60%;" />
+            <col style="width: 40px;" />
         </colgroup>
 
         <tr>
@@ -36,14 +36,16 @@
     </table>
 
     <div class="section" *ngIf="schemasToAdd.length > 0">
-        <form class="form-inline" (ngSubmit)="addSchema()">
-            <div class="form-group me-1">
+        <form class="row g-2" (ngSubmit)="addSchema()">
+            <div class="col">
                 <select class="form-select schemas-control" [disabled]="triggerForm.form.disabled" [(ngModel)]="schemaToAdd" name="schema">
                     <option *ngFor="let schema of schemasToAdd; trackBy: trackBySchema" [ngValue]="schema">{{schema.displayName}}</option>
                 </select>
             </div>
 
-            <button type="submit" class="btn btn-success" [disabled]="triggerForm.form.disabled">Add Schema</button>
+            <div class="col-auto">
+                <button type="submit" class="btn btn-success" [disabled]="triggerForm.form.disabled">Add Schema</button>
+            </div>
         </form>
     </div>
     

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

@@ -15,7 +15,7 @@ export interface TriggerSchemaForm {
 }
 
 @Component({
-    selector: 'sqx-content-changed-trigger',
+    selector: 'sqx-content-changed-trigger[trigger][triggerForm]',
     styleUrls: ['./content-changed-trigger.component.scss'],
     templateUrl: './content-changed-trigger.component.html',
 })

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

@@ -9,14 +9,11 @@ import { Component, Input } from '@angular/core';
 import { TriggerForm } from '@app/shared';
 
 @Component({
-    selector: 'sqx-schema-changed-trigger',
+    selector: 'sqx-schema-changed-trigger[triggerForm]',
     styleUrls: ['./schema-changed-trigger.component.scss'],
     templateUrl: './schema-changed-trigger.component.html',
 })
 export class SchemaChangedTriggerComponent {
-    @Input()
-    public trigger: any;
-
     @Input()
     public triggerForm: TriggerForm;
 }

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

@@ -9,7 +9,7 @@ import { Component, Input } from '@angular/core';
 import { TriggerForm } from '@app/shared';
 
 @Component({
-    selector: 'sqx-usage-trigger',
+    selector: 'sqx-usage-trigger[triggerForm]',
     styleUrls: ['./usage-trigger.component.scss'],
     templateUrl: './usage-trigger.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormBuilder } from '@angular/forms';
 import { EditSchemaForm, SchemaDto, SchemasState } from '@app/shared';
 
 @Component({
-    selector: 'sqx-schema-edit-form',
+    selector: 'sqx-schema-edit-form[schema]',
     styleUrls: ['./schema-edit-form.component.scss'],
     templateUrl: './schema-edit-form.component.html',
 })
@@ -44,10 +44,13 @@ export class SchemaEditFormComponent implements OnChanges {
 
         if (value) {
             this.schemasState.update(this.schema, value)
-                .subscribe(() => {
-                    this.fieldForm.submitCompleted({ noReset: true });
-                }, error => {
-                    this.fieldForm.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.fieldForm.submitCompleted({ noReset: true });
+                    },
+                    error: error => {
+                        this.fieldForm.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -10,7 +10,7 @@ import { FormBuilder } from '@angular/forms';
 import { SchemaDto, SchemasState, SynchronizeSchemaForm } from '@app/shared';
 
 @Component({
-    selector: 'sqx-schema-export-form',
+    selector: 'sqx-schema-export-form[schema]',
     styleUrls: ['./schema-export-form.component.scss'],
     templateUrl: './schema-export-form.component.html',
 })
@@ -43,10 +43,13 @@ export class SchemaExportFormComponent implements OnChanges {
 
         if (value) {
             this.schemasState.synchronize(this.schema, value)
-                .subscribe(() => {
-                    this.synchronizeForm.submitCompleted({ noReset: true });
-                }, error => {
-                    this.synchronizeForm.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.synchronizeForm.submitCompleted({ noReset: true });
+                    },
+                    error: error => {
+                        this.synchronizeForm.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -12,7 +12,7 @@ import { AddFieldForm, AppSettingsDto, createProperties, EditFieldForm, FieldDto
 const DEFAULT_FIELD = { name: '', partitioning: 'invariant', properties: createProperties('String') };
 
 @Component({
-    selector: 'sqx-field-wizard',
+    selector: 'sqx-field-wizard[schema][settings]',
     styleUrls: ['./field-wizard.component.scss'],
     templateUrl: './field-wizard.component.html',
 })
@@ -27,7 +27,7 @@ export class FieldWizardComponent implements OnInit {
     public settings: AppSettingsDto;
 
     @Input()
-    public parent: RootFieldDto;
+    public parent: RootFieldDto | null | undefined;
 
     @Output()
     public complete = new EventEmitter();
@@ -65,23 +65,26 @@ export class FieldWizardComponent implements OnInit {
 
         if (value) {
             this.schemasState.addField(this.schema, value, this.parent)
-                .subscribe(dto => {
-                    this.field = dto;
-
-                    this.addFieldForm.submitCompleted({ newValue: { ...DEFAULT_FIELD } });
-
-                    if (addNew) {
-                        if (Types.isFunction(this.nameInput.nativeElement.focus)) {
-                            this.nameInput.nativeElement.focus();
+                .subscribe({
+                    next: dto => {
+                        this.field = dto;
+
+                        this.addFieldForm.submitCompleted({ newValue: { ...DEFAULT_FIELD } });
+
+                        if (addNew) {
+                            if (Types.isFunction(this.nameInput.nativeElement.focus)) {
+                                this.nameInput.nativeElement.focus();
+                            }
+                        } else if (edit) {
+                            this.editForm = new EditFieldForm(this.formBuilder, this.field.properties);
+                            this.editForm.load(this.field.properties);
+                        } else {
+                            this.emitComplete();
                         }
-                    } else if (edit) {
-                        this.editForm = new EditFieldForm(this.formBuilder, this.field.properties);
-                        this.editForm.load(this.field.properties);
-                    } else {
-                        this.emitComplete();
-                    }
-                }, error => {
-                    this.addFieldForm.submitFailed(error);
+                    },
+                    error: error => {
+                        this.addFieldForm.submitFailed(error);
+                    },
                 });
         }
     }
@@ -97,16 +100,19 @@ export class FieldWizardComponent implements OnInit {
             const properties = createProperties(this.field.properties.fieldType, value);
 
             this.schemasState.updateField(this.schema, this.field as RootFieldDto, { properties })
-                .subscribe(() => {
-                    this.editForm!.submitCompleted();
-
-                    if (addNew) {
-                        this.editForm = undefined;
-                    } else {
-                        this.emitComplete();
-                    }
-                }, error => {
-                    this.editForm!.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.editForm!.submitCompleted();
+
+                        if (addNew) {
+                            this.editForm = undefined;
+                        } else {
+                            this.emitComplete();
+                        }
+                    },
+                    error: error => {
+                        this.editForm!.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -11,7 +11,7 @@ import { FormBuilder } from '@angular/forms';
 import { AppSettingsDto, createProperties, DialogModel, EditFieldForm, fadeAnimation, LanguageDto, ModalModel, NestedFieldDto, RootFieldDto, SchemaDto, SchemasState, sorted } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field',
+    selector: 'sqx-field[field][languages][schema][settings]',
     styleUrls: ['./field.component.scss'],
     templateUrl: './field.component.html',
     animations: [
@@ -112,10 +112,13 @@ export class FieldComponent implements OnChanges {
             const properties = createProperties(this.field.properties.fieldType, value);
 
             this.schemasState.updateField(this.schema, this.field, { properties })
-                .subscribe(() => {
-                    this.editForm.submitCompleted({ noReset: true });
-                }, error => {
-                    this.editForm.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.editForm.submitCompleted({ noReset: true });
+                    },
+                    error: error => {
+                        this.editForm.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-form-common',
+    selector: 'sqx-field-form-common[field][fieldForm]',
     styleUrls: ['./field-form-common.component.scss'],
     templateUrl: './field-form-common.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-form-ui',
+    selector: 'sqx-field-form-ui[field][fieldForm]',
     styleUrls: ['./field-form-ui.component.scss'],
     templateUrl: './field-form-ui.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { AppSettingsDto, FieldDto, LanguageDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-form-validation',
+    selector: 'sqx-field-form-validation[field][fieldForm][languages][settings]',
     styleUrls: ['./field-form-validation.component.scss'],
     templateUrl: './field-form-validation.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { AppSettingsDto, FieldDto, LanguageDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-form',
+    selector: 'sqx-field-form[field][fieldForm][languages][settings]',
     styleUrls: ['./field-form.component.scss'],
     templateUrl: './field-form.component.html',
 })

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

@@ -10,7 +10,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { AppsState, DialogModel, FieldDto, fieldTypes, LanguagesState, SchemaDto, SchemasState, sorted } from '@app/shared';
 
 @Component({
-    selector: 'sqx-schema-fields',
+    selector: 'sqx-schema-fields[schema]',
     styleUrls: ['./schema-fields.component.scss'],
     templateUrl: './schema-fields.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { ArrayFieldPropertiesDto, FieldDto, SchemaTagSource } from '@app/shared';
 
 @Component({
-    selector: 'sqx-array-validation',
+    selector: 'sqx-array-validation[field][fieldForm][properties]',
     styleUrls: ['array-validation.component.scss'],
     templateUrl: 'array-validation.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { AssetsFieldPropertiesDto, FieldDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-assets-ui',
+    selector: 'sqx-assets-ui[field][fieldForm][properties]',
     styleUrls: ['assets-ui.component.scss'],
     templateUrl: 'assets-ui.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { AssetsFieldPropertiesDto, FieldDto, LanguageDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-assets-validation',
+    selector: 'sqx-assets-validation[field][fieldForm][properties]',
     styleUrls: ['assets-validation.component.scss'],
     templateUrl: 'assets-validation.component.html',
 })

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

@@ -10,11 +10,13 @@ import { FormGroup } from '@angular/forms';
 import { BooleanFieldPropertiesDto, BOOLEAN_FIELD_EDITORS, FieldDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-boolean-ui',
+    selector: 'sqx-boolean-ui[field][fieldForm][properties]',
     styleUrls: ['boolean-ui.component.scss'],
     templateUrl: 'boolean-ui.component.html',
 })
 export class BooleanUIComponent {
+    public readonly editors = BOOLEAN_FIELD_EDITORS;
+
     @Input()
     public fieldForm: FormGroup;
 
@@ -23,6 +25,4 @@ export class BooleanUIComponent {
 
     @Input()
     public properties: BooleanFieldPropertiesDto;
-
-    public editors = BOOLEAN_FIELD_EDITORS;
 }

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

@@ -11,7 +11,7 @@ import { BooleanFieldPropertiesDto, FieldDto, hasNoValue$, LanguageDto } from '@
 import { Observable } from 'rxjs';
 
 @Component({
-    selector: 'sqx-boolean-validation',
+    selector: 'sqx-boolean-validation[field][fieldForm][properties]',
     styleUrls: ['boolean-validation.component.scss'],
     templateUrl: 'boolean-validation.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, ReferencesFieldPropertiesDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-component-ui',
+    selector: 'sqx-component-ui[field][fieldForm][properties]',
     styleUrls: ['component-ui.component.scss'],
     templateUrl: 'component-ui.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, ReferencesFieldPropertiesDto, SchemaTagSource } from '@app/shared';
 
 @Component({
-    selector: 'sqx-component-validation',
+    selector: 'sqx-component-validation[field][fieldForm][properties]',
     styleUrls: ['component-validation.component.scss'],
     templateUrl: 'component-validation.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, ReferencesFieldPropertiesDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-components-ui',
+    selector: 'sqx-components-ui[field][fieldForm][properties]',
     styleUrls: ['components-ui.component.scss'],
     templateUrl: 'components-ui.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, ReferencesFieldPropertiesDto, SchemaTagSource } from '@app/shared';
 
 @Component({
-    selector: 'sqx-components-validation',
+    selector: 'sqx-components-validation[field][fieldForm][properties]',
     styleUrls: ['components-validation.component.scss'],
     templateUrl: 'components-validation.component.html',
 })

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

@@ -10,12 +10,13 @@ import { FormGroup } from '@angular/forms';
 import { DateTimeFieldPropertiesDto, DATETIME_FIELD_EDITORS, FieldDto, FloatConverter } from '@app/shared';
 
 @Component({
-    selector: 'sqx-date-time-ui',
+    selector: 'sqx-date-time-ui[field][fieldForm][properties]',
     styleUrls: ['date-time-ui.component.scss'],
     templateUrl: 'date-time-ui.component.html',
 })
 export class DateTimeUIComponent {
     public readonly converter = FloatConverter.INSTANCE;
+    public readonly editors = DATETIME_FIELD_EDITORS;
 
     @Input()
     public fieldForm: FormGroup;
@@ -25,6 +26,4 @@ export class DateTimeUIComponent {
 
     @Input()
     public properties: DateTimeFieldPropertiesDto;
-
-    public editors = DATETIME_FIELD_EDITORS;
 }

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

@@ -13,7 +13,7 @@ import { Observable } from 'rxjs';
 const CALCULATED_DEFAULT_VALUES: ReadonlyArray<string> = ['Now', 'Today'];
 
 @Component({
-    selector: 'sqx-date-time-validation',
+    selector: 'sqx-date-time-validation[field][fieldForm][properties]',
     styleUrls: ['date-time-validation.component.scss'],
     templateUrl: 'date-time-validation.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, GeolocationFieldPropertiesDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-geolocation-ui',
+    selector: 'sqx-geolocation-ui[field][fieldForm][properties]',
     styleUrls: ['geolocation-ui.component.scss'],
     templateUrl: 'geolocation-ui.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, GeolocationFieldPropertiesDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-geolocation-validation',
+    selector: 'sqx-geolocation-validation[field][fieldForm][properties]',
     styleUrls: ['geolocation-validation.component.scss'],
     templateUrl: 'geolocation-validation.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, JsonFieldPropertiesDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-json-ui',
+    selector: 'sqx-json-ui[field][fieldForm][properties]',
     styleUrls: ['json-ui.component.scss'],
     templateUrl: 'json-ui.component.html',
 })

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, JsonFieldPropertiesDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-json-validation',
+    selector: 'sqx-json-validation[field][fieldForm][properties]',
     styleUrls: ['json-validation.component.scss'],
     templateUrl: 'json-validation.component.html',
 })

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

@@ -12,12 +12,13 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
-    selector: 'sqx-number-ui',
+    selector: 'sqx-number-ui[field][fieldForm][properties]',
     styleUrls: ['number-ui.component.scss'],
     templateUrl: 'number-ui.component.html',
 })
 export class NumberUIComponent extends ResourceOwner implements OnChanges {
     public readonly converter = FloatConverter.INSTANCE;
+    public readonly editors = NUMBER_FIELD_EDITORS;
 
     @Input()
     public fieldForm: FormGroup;
@@ -28,8 +29,6 @@ export class NumberUIComponent extends ResourceOwner implements OnChanges {
     @Input()
     public properties: NumberFieldPropertiesDto;
 
-    public editors = NUMBER_FIELD_EDITORS;
-
     public hideAllowedValues: Observable<boolean>;
     public hideInlineEditable: Observable<boolean>;
 

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, LanguageDto, NumberFieldPropertiesDto, RootFieldDto, Types } from '@app/shared';
 
 @Component({
-    selector: 'sqx-number-validation',
+    selector: 'sqx-number-validation[field][fieldForm][properties]',
     styleUrls: ['number-validation.component.scss'],
     templateUrl: 'number-validation.component.html',
 })

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

@@ -10,11 +10,13 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, ReferencesFieldPropertiesDto, REFERENCES_FIELD_EDITORS } from '@app/shared';
 
 @Component({
-    selector: 'sqx-references-ui',
+    selector: 'sqx-references-ui[field][fieldForm][properties]',
     styleUrls: ['references-ui.component.scss'],
     templateUrl: 'references-ui.component.html',
 })
 export class ReferencesUIComponent {
+    public readonly editors = REFERENCES_FIELD_EDITORS;
+
     @Input()
     public fieldForm: FormGroup;
 
@@ -23,6 +25,4 @@ export class ReferencesUIComponent {
 
     @Input()
     public properties: ReferencesFieldPropertiesDto;
-
-    public editors = REFERENCES_FIELD_EDITORS;
 }

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, LanguageDto, ReferencesFieldPropertiesDto, SchemaTagSource } from '@app/shared';
 
 @Component({
-    selector: 'sqx-references-validation',
+    selector: 'sqx-references-validation[field][fieldForm][properties]',
     styleUrls: ['references-validation.component.scss'],
     templateUrl: 'references-validation.component.html',
 })

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

@@ -12,11 +12,13 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
-    selector: 'sqx-string-ui',
+    selector: 'sqx-string-ui[field][fieldForm][properties]',
     styleUrls: ['string-ui.component.scss'],
     templateUrl: 'string-ui.component.html',
 })
 export class StringUIComponent extends ResourceOwner implements OnChanges {
+    public readonly editors = STRING_FIELD_EDITORS;
+
     @Input()
     public fieldForm: FormGroup;
 
@@ -26,8 +28,6 @@ export class StringUIComponent extends ResourceOwner implements OnChanges {
     @Input()
     public properties: StringFieldPropertiesDto;
 
-    public editors = STRING_FIELD_EDITORS;
-
     public hideAllowedValues: Observable<boolean>;
     public hideInlineEditable: Observable<boolean>;
 

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

@@ -11,7 +11,7 @@ import { AppSettingsDto, fadeAnimation, FieldDto, hasNoValue$, hasValue$, Langua
 import { Observable } from 'rxjs';
 
 @Component({
-    selector: 'sqx-string-validation',
+    selector: 'sqx-string-validation[field][fieldForm][properties]',
     styleUrls: ['string-validation.component.scss'],
     templateUrl: 'string-validation.component.html',
     animations: [
@@ -19,6 +19,8 @@ import { Observable } from 'rxjs';
     ],
 })
 export class StringValidationComponent extends ResourceOwner implements OnChanges {
+    public readonly contentTypes = STRING_CONTENT_TYPES;
+
     @Input()
     public fieldForm: FormGroup;
 
@@ -37,8 +39,6 @@ export class StringValidationComponent extends ResourceOwner implements OnChange
     @Input()
     public isLocalizable?: boolean | null;
 
-    public contentTypes = STRING_CONTENT_TYPES;
-
     public showPatternMessage: Observable<boolean>;
     public showPatternSuggestions: Observable<boolean>;
 

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

@@ -10,11 +10,13 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, TagsFieldPropertiesDto, TAGS_FIELD_EDITORS } from '@app/shared';
 
 @Component({
-    selector: 'sqx-tags-ui',
+    selector: 'sqx-tags-ui[field][fieldForm][properties]',
     styleUrls: ['tags-ui.component.scss'],
     templateUrl: 'tags-ui.component.html',
 })
 export class TagsUIComponent {
+    public readonly editors = TAGS_FIELD_EDITORS;
+
     @Input()
     public fieldForm: FormGroup;
 
@@ -23,6 +25,4 @@ export class TagsUIComponent {
 
     @Input()
     public properties: TagsFieldPropertiesDto;
-
-    public editors = TAGS_FIELD_EDITORS;
 }

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

@@ -10,7 +10,7 @@ import { FormGroup } from '@angular/forms';
 import { FieldDto, LanguageDto, TagsFieldPropertiesDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-tags-validation',
+    selector: 'sqx-tags-validation[field][fieldForm][languages][properties]',
     styleUrls: ['tags-validation.component.scss'],
     templateUrl: 'tags-validation.component.html',
 })

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

@@ -48,10 +48,13 @@ export class SchemaPreviewUrlsFormComponent implements OnChanges {
 
         if (value) {
             this.schemasState.configurePreviewUrls(this.schema, value)
-                .subscribe(() => {
-                    this.editForm.submitCompleted({ noReset: true });
-                }, error => {
-                    this.editForm.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.editForm.submitCompleted({ noReset: true });
+                    },
+                    error: error => {
+                        this.editForm.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -67,10 +67,13 @@ export class SchemaFieldRulesFormComponent implements OnChanges {
 
         if (value) {
             this.schemasState.configureFieldRules(this.schema, value)
-                .subscribe(() => {
-                    this.editForm.submitCompleted({ noReset: true });
-                }, error => {
-                    this.editForm.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.editForm.submitCompleted({ noReset: true });
+                    },
+                    error: error => {
+                        this.editForm.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -56,10 +56,13 @@ export class SchemaScriptsFormComponent implements OnChanges {
 
         if (value) {
             this.schemasState.configureScripts(this.schema, value)
-                .subscribe(() => {
-                    this.editForm.submitCompleted({ noReset: true });
-                }, error => {
-                    this.editForm.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.editForm.submitCompleted({ noReset: true });
+                    },
+                    error: error => {
+                        this.editForm.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -57,10 +57,13 @@ export class SchemaFormComponent implements OnInit {
 
         if (value) {
             this.schemasState.create(value)
-                .subscribe(dto => {
-                    this.emitComplete(dto);
-                }, error => {
-                    this.createForm.submitFailed(error);
+                .subscribe({
+                    next: dto => {
+                        this.emitComplete(dto);
+                    },
+                    error: error => {
+                        this.createForm.submitFailed(error);
+                    },
                 });
         }
     }

frontend/app/features/settings/pages/backups/backup.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ApiUrlConfig, BackupDto, BackupsState, Duration } from '@app/shared';
 
 @Component({
-    selector: 'sqx-backup',
+    selector: 'sqx-backup[backup]',
     styleUrls: ['./backup.component.scss'],
     templateUrl: './backup.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

frontend/app/features/settings/pages/clients/client-add-form.component.ts

@@ -29,10 +29,13 @@ export class ClientAddFormComponent {
 
         if (value) {
             this.clientsState.attach(value)
-                .subscribe(() => {
-                    this.addClientForm.submitCompleted();
-                }, error => {
-                    this.addClientForm.submitFailed(error);
+                .subscribe({
+                    next: () => {
+                        this.addClientForm.submitCompleted();
+                    },
+                    error: error => {
+                        this.addClientForm.submitFailed(error);
+                    },
                 });
         }
     }

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

@@ -51,12 +51,15 @@ export class ClientConnectFormComponent implements OnInit {
         this.connectLibraryText = connectLibrary(this.apiUrl, this.appName, this.client);
 
         this.clientsService.createToken(this.appsState.appName, this.client)
-            .subscribe(dto => {
-                this.connectToken = dto;
-
-                this.changeDetector.markForCheck();
-            }, error => {
-                this.dialogs.notifyError(error);
+            .subscribe({
+                next: dto => {
+                    this.connectToken = dto;
+
+                    this.changeDetector.markForCheck();
+                },
+                error: error => {
+                    this.dialogs.notifyError(error);
+                },
             });
     }