Typing fixes for templates.

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

@@ -1,7 +1,7 @@
 <sqx-title [message]="schema.displayName"></sqx-title>
 
 <form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish()">
-    <sqx-panel desiredWidth="*" minWidth="60rem" [showSidebar]="content">
+    <sqx-panel desiredWidth="*" minWidth="60rem" [showSidebar]="hasContent">
         <ng-container title>
             <a class="btn btn-text" (click)="back()" *ngIf="!schema.isSingleton">
                 <i class="icon-angle-left"></i>

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

@@ -62,7 +62,11 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     public language: AppLanguageDto;
     public languages: ReadonlyArray<AppLanguageDto>;
 
-    public trackByFieldFn: Function;
+    public get hasContent() {
+        return !!this.content;
+    }
+
+    public trackByFieldFn: (index: number, field: FieldDto) => any;
 
     @ViewChild('dueTimeSelector', { static: false })
     public dueTimeSelector: DueTimeSelectorComponent;

src/Squidex/app/features/content/shared/content-selector-item.component.ts

@@ -8,9 +8,9 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 
 import {
-    AppLanguageDto,
     ContentDto,
     getContentValue,
+    LanguageDto,
     RootFieldDto
 } from '@app/shared';
 
@@ -62,7 +62,7 @@ export class ContentSelectorItemComponent implements OnChanges {
     public selectable = true;
 
     @Input()
-    public language: AppLanguageDto;
+    public language: LanguageDto;
 
     @Input()
     public fields: ReadonlyArray<RootFieldDto>;

src/Squidex/app/features/content/shared/content.component.ts

@@ -68,7 +68,7 @@ export class ContentComponent implements OnChanges {
     @Input('sqxContent')
     public content: ContentDto;
 
-    public trackByFieldFn: Function;
+    public trackByFieldFn: (index: number, field: FieldDto) => any;
 
     public patchForm: PatchContentForm;
     public patchAllowed = false;

src/Squidex/app/features/content/shared/contents-selector.component.html

@@ -60,7 +60,6 @@
                             <th class="cell-time">
                                 <sqx-table-header text="Updated"
                                     [sortable]="true"
-                                    [sortable]="field.properties.isSortable"
                                     [field]="'lastModified'"
                                     [query]="contentsState.contentsQuery | async"
                                     (queryChange)="search($event)"

src/Squidex/app/features/content/shared/contents-selector.component.ts

@@ -124,7 +124,7 @@ export class ContentsSelectorComponent extends ResourceOwner implements OnInit {
     }
 
     public isItemSelected(content: ContentDto) {
-        return this.selectedItems[content.id];
+        return !!this.selectedItems[content.id];
     }
 
     public isItemAlreadySelected(content: ContentDto) {

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

@@ -6,14 +6,14 @@
     
         <span class="field-disabled pl-1" *ngIf="field.isDisabled">Disabled</span>
     
-        <sqx-control-errors *ngIf="form" [for]="control" [fieldName]="field.displayName" [submitted]="form.submitted | async"></sqx-control-errors>
+        <sqx-control-errors *ngIf="form" [for]="editorControl" [fieldName]="field.displayName" [submitted]="form.submitted | async"></sqx-control-errors>
     </ng-container>
 
 	<div>
 		<ng-container *ngIf="field.properties.editorUrl; else noEditor">
             <sqx-iframe-editor [url]="field.properties.editorUrl"
                 [context]="formContext"
-                [formControl]="control"
+                [formControl]="editorControl"
                 [formValue]="form?.value | async">
             </sqx-iframe-editor>
 		</ng-container>
@@ -22,53 +22,53 @@
 			<ng-container [ngSwitch]="field.properties.fieldType">
                 <ng-container *ngSwitchCase="'Array'">
                     <sqx-array-editor 
-                        [arrayControl]="control"
+                        [arrayControl]="arrayControl"
                         [form]="form"
                         [formContext]="formContext"
-                        [field]="field"
+                        [field]="rootField"
                         [language]="language"
                         [languages]="languages">
                     </sqx-array-editor>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Assets'">
-                    <sqx-assets-editor [formControl]="control" [isCompact]="isCompact"></sqx-assets-editor>
+                    <sqx-assets-editor [formControl]="editorControl" [isCompact]="isCompact"></sqx-assets-editor>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Boolean'">
                     <ng-container [ngSwitch]="field.rawProperties.editor">
                         <ng-container *ngSwitchCase="'Toggle'">
-                            <sqx-toggle [formControl]="control" [threeStates]="!field.properties.isRequired"></sqx-toggle>
+                            <sqx-toggle [formControl]="editorControl" [threeStates]="!field.properties.isRequired"></sqx-toggle>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Checkbox'">
-                            <input type="checkbox" [formControl]="control" class="form-check" sqxIndeterminateValue />
+                            <input type="checkbox" [formControl]="editorControl" class="form-check" sqxIndeterminateValue />
                         </ng-container>
                     </ng-container>
                 </ng-container>
                 <ng-container *ngSwitchCase="'DateTime'">
-                    <sqx-date-time-editor enforceTime="true" [mode]="field.rawProperties.editor" [formControl]="control"></sqx-date-time-editor>
+                    <sqx-date-time-editor enforceTime="true" [mode]="field.rawProperties.editor" [formControl]="editorControl"></sqx-date-time-editor>
                 </ng-container>
 				<ng-container *ngSwitchCase="'Geolocation'">
-					<sqx-geolocation-editor [isCompact]="isCompact" [formControl]="control"></sqx-geolocation-editor>
+					<sqx-geolocation-editor [isCompact]="isCompact" [formControl]="editorControl"></sqx-geolocation-editor>
 				</ng-container>
 				<ng-container *ngSwitchCase="'Json'">
-					<sqx-json-editor [formControl]="control"></sqx-json-editor>
+					<sqx-json-editor [formControl]="editorControl"></sqx-json-editor>
 				</ng-container>
 				<ng-container *ngSwitchCase="'Number'">
 					<ng-container [ngSwitch]="field.rawProperties.editor">
 						<ng-container *ngSwitchCase="'Input'">
-							<input class="form-control" type="number" [formControl]="control" [placeholder]="field.displayPlaceholder" />
+							<input class="form-control" type="number" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
 						</ng-container>
 						<ng-container *ngSwitchCase="'Stars'">
-							<sqx-stars [formControl]="control" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
+							<sqx-stars [formControl]="editorControl" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Dropdown'">
-							<select class="form-control" [formControl]="control">
+							<select class="form-control" [formControl]="editorControl">
 								<option [ngValue]="null"></option>
 								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
 							</select>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
 							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
-								<input class="form-check-input" type="radio" [value]="value" [formControl]="control" [name]="uniqueId" />
+								<input class="form-check-input" type="radio" [value]="value" [formControl]="editorControl" [name]="uniqueId" />
 								<label class="form-check-label">
 									{{value}}
 								</label>
@@ -80,7 +80,7 @@
                     <ng-container [ngSwitch]="field.rawProperties.editor">
                         <ng-container *ngSwitchCase="'List'">
                             <sqx-references-editor
-                                [formControl]="control" 
+                                [formControl]="editorControl" 
                                 [allowDuplicates]="field.rawProperties.allowDuplicated"
                                 [language]="language"
                                 [languages]="languages"
@@ -90,7 +90,7 @@
                         </ng-container>
                         <ng-container *ngSwitchCase="'Dropdown'">
                             <sqx-references-dropdown
-                                [formControl]="control" 
+                                [formControl]="editorControl" 
                                 [language]="language"
 								[schemaId]="field.rawProperties.singleId">
                             </sqx-references-dropdown>
@@ -100,52 +100,52 @@
 				<ng-container *ngSwitchCase="'String'">
 					<ng-container [ngSwitch]="field.rawProperties.editor">
 						<ng-container *ngSwitchCase="'Input'">
-							<input class="form-control" type="text" [formControl]="control" [placeholder]="field.displayPlaceholder" />
+							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" />
 						</ng-container>
 						<ng-container *ngSwitchCase="'Slug'">
-							<input class="form-control" type="text" [formControl]="control" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
+							<input class="form-control" type="text" [formControl]="editorControl" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify" />
 						</ng-container>
 						<ng-container *ngSwitchCase="'TextArea'">
-							<textarea class="form-control" [formControl]="control" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
+							<textarea class="form-control" [formControl]="editorControl" rows="5" [placeholder]="field.displayPlaceholder"></textarea>
 						</ng-container>
 						<ng-container *ngSwitchCase="'RichText'">
-							<sqx-rich-editor [formControl]="control"></sqx-rich-editor>
+							<sqx-rich-editor [formControl]="editorControl"></sqx-rich-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Html'">
-							<sqx-code-editor [formControl]="control" mode="ace/mode/html"></sqx-code-editor>
+							<sqx-code-editor [formControl]="editorControl" mode="ace/mode/html"></sqx-code-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Markdown'">
-							<sqx-markdown-editor [formControl]="control"></sqx-markdown-editor>
+							<sqx-markdown-editor [formControl]="editorControl"></sqx-markdown-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Dropdown'">
-							<select class="form-control" [formControl]="control">
+							<select class="form-control" [formControl]="editorControl">
 								<option [ngValue]="null"></option>
 								<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
 							</select>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
 							<div class="form-check form-check-inline" *ngFor="let value of field.rawProperties.allowedValues">
-								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="control" [name]="uniqueId" />
+								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="editorControl" [name]="uniqueId" />
 								<label class="form-check-label">
 									{{value}}
 								</label>
 							</div>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Color'">
-                            <sqx-color-picker [formControl]="control" [placeholder]="field.displayPlaceholder"></sqx-color-picker>
+                            <sqx-color-picker [formControl]="editorControl" [placeholder]="field.displayPlaceholder"></sqx-color-picker>
 						</ng-container>
 					</ng-container>
 				</ng-container>
 				<ng-container *ngSwitchCase="'Tags'">
                     <ng-container [ngSwitch]="field.rawProperties.editor">
                         <ng-container *ngSwitchCase="'Tags'">
-                            <sqx-tag-editor [formControl]="control" [placeholder]="field.displayPlaceholder" [suggestions]="field.rawProperties.allowedValues"></sqx-tag-editor>
+                            <sqx-tag-editor [formControl]="editorControl" [placeholder]="field.displayPlaceholder" [suggestions]="field.rawProperties.allowedValues"></sqx-tag-editor>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Checkboxes'">
-                            <sqx-checkbox-group [formControl]="control" [values]="field.rawProperties.allowedValues"></sqx-checkbox-group>
+                            <sqx-checkbox-group [formControl]="editorControl" [values]="field.rawProperties.allowedValues"></sqx-checkbox-group>
                         </ng-container>
                         <ng-container *ngSwitchCase="'Dropdown'">
-                            <select multiple class="form-control" [formControl]="control">
+                            <select multiple class="form-control" [formControl]="editorControl">
                                 <option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
                             </select>
                         </ng-container>

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

@@ -6,13 +6,14 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl } from '@angular/forms';
 
 import {
     AppLanguageDto,
     EditContentForm,
     FieldDto,
-    MathHelper
+    MathHelper,
+    RootFieldDto
 } from '@app/shared';
 
 @Component({
@@ -31,7 +32,7 @@ export class FieldEditorComponent {
     public field: FieldDto;
 
     @Input()
-    public control: FormControl;
+    public control: AbstractControl;
 
     @Input()
     public language: AppLanguageDto;
@@ -45,5 +46,17 @@ export class FieldEditorComponent {
     @Input()
     public displaySuffix: string;
 
+    public get arrayControl() {
+        return this.control as FormArray;
+    }
+
+    public get editorControl() {
+        return this.control as FormControl;
+    }
+
+    public get rootField() {
+        return this.field as RootFieldDto;
+    }
+
     public uniqueId = MathHelper.guid();
 }

src/Squidex/app/features/schemas/pages/schema/field.component.ts

@@ -45,7 +45,7 @@ export class FieldComponent implements OnChanges {
 
     public dropdown = new ModalModel();
 
-    public trackByFieldFn: Function;
+    public trackByFieldFn: (index: number, field: NestedFieldDto) => any;
 
     public isEditing = false;
     public isEditable = false;

src/Squidex/app/features/schemas/pages/schema/forms/field-form-ui.component.ts

@@ -13,30 +13,30 @@ import { FieldDto } from '@app/shared';
 @Component({
     selector: 'sqx-field-form-ui',
     template: `
-        <ng-container [ngSwitch]="field.properties.fieldType">
+        <ng-container [ngSwitch]="field.rawProperties.fieldType">
             <ng-container *ngSwitchCase="'Boolean'">
-                <sqx-boolean-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-boolean-ui>
+                <sqx-boolean-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-boolean-ui>
             </ng-container>
             <ng-container *ngSwitchCase="'DateTime'">
-                <sqx-date-time-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-date-time-ui>
+                <sqx-date-time-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-date-time-ui>
             </ng-container>
             <ng-container *ngSwitchCase="'Geolocation'">
-                <sqx-geolocation-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-geolocation-ui>
+                <sqx-geolocation-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-geolocation-ui>
             </ng-container>
             <ng-container *ngSwitchCase="'Json'">
-                <sqx-json-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-json-ui>
+                <sqx-json-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-json-ui>
             </ng-container>
             <ng-container *ngSwitchCase="'Number'">
-                <sqx-number-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-number-ui>
+                <sqx-number-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-number-ui>
             </ng-container>
             <ng-container *ngSwitchCase="'References'">
-                <sqx-references-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-references-ui>
+                <sqx-references-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-references-ui>
             </ng-container>
             <ng-container *ngSwitchCase="'String'">
-                <sqx-string-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-string-ui>
+                <sqx-string-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-string-ui>
             </ng-container>
             <ng-container *ngSwitchCase="'Tags'">
-                <sqx-tags-ui [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-tags-ui>
+                <sqx-tags-ui [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-tags-ui>
             </ng-container>
         </ng-container>`
 })

src/Squidex/app/features/schemas/pages/schema/forms/field-form-validation.component.ts

@@ -13,33 +13,33 @@ import { FieldDto, PatternDto } from '@app/shared';
 @Component({
     selector: 'sqx-field-form-validation',
     template: `
-        <ng-container [ngSwitch]="field.properties.fieldType">
+        <ng-container [ngSwitch]="field.rawProperties.fieldType">
             <ng-container *ngSwitchCase="'Assets'">
-                <sqx-assets-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-assets-validation>
+                <sqx-assets-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-assets-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'DateTime'">
-                <sqx-date-time-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-date-time-validation>
+                <sqx-date-time-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-date-time-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'Boolean'">
-                <sqx-boolean-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-boolean-validation>
+                <sqx-boolean-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-boolean-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'Geolocation'">
-                <sqx-geolocation-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-geolocation-validation>
+                <sqx-geolocation-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-geolocation-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'Json'">
-                <sqx-json-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-json-validation>
+                <sqx-json-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-json-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'Number'">
-                <sqx-number-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-number-validation>
+                <sqx-number-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-number-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'References'">
-                <sqx-references-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-references-validation>
+                <sqx-references-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-references-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'String'">
-                <sqx-string-validation [editForm]="editForm" [field]="field" [properties]="field.properties" [patterns]="patterns"></sqx-string-validation>
+                <sqx-string-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties" [patterns]="patterns"></sqx-string-validation>
             </ng-container>
             <ng-container *ngSwitchCase="'Tags'">
-                <sqx-tags-validation [editForm]="editForm" [field]="field" [properties]="field.properties"></sqx-tags-validation>
+                <sqx-tags-validation [editForm]="editForm" [field]="field" [properties]="field.rawProperties"></sqx-tags-validation>
             </ng-container>
         </ng-container>`
 })

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -49,7 +49,7 @@ export class SchemaPageComponent extends ResourceOwner implements OnInit {
     public editSchemaDialog = new DialogModel();
     public exportDialog = new DialogModel();
 
-    public trackByFieldFn: Function;
+    public trackByFieldFn: (index: number, field: FieldDto) => any;
 
     constructor(
         public readonly schemasState: SchemasState,

src/Squidex/app/features/settings/pages/clients/clients-page.component.ts

@@ -35,7 +35,7 @@ export class ClientsPageComponent implements OnInit {
         this.clientsState.load(true);
     }
 
-    public trackByClient(item: ClientDto) {
-        return item.id;
+    public trackByClient(index: number, client: ClientDto) {
+        return client.id;
     }
 }

src/Squidex/app/features/settings/pages/languages/language.component.ts

@@ -13,6 +13,7 @@ import {
     AppLanguageDto,
     EditLanguageForm,
     fadeAnimation,
+    LanguageDto,
     LanguagesState,
     sorted
 } from '@app/shared';
@@ -30,12 +31,12 @@ export class LanguageComponent implements OnChanges {
     public language: AppLanguageDto;
 
     @Input()
-    public fallbackLanguages: ReadonlyArray<AppLanguageDto>;
+    public fallbackLanguages: ReadonlyArray<LanguageDto>;
 
     @Input()
-    public fallbackLanguagesNew: ReadonlyArray<AppLanguageDto>;
+    public fallbackLanguagesNew: ReadonlyArray<LanguageDto>;
 
-    public otherLanguage: AppLanguageDto;
+    public otherLanguage: LanguageDto;
 
     public isEditing = false;
     public isEditable = false;

src/Squidex/app/features/settings/pages/roles/role.component.html

@@ -29,7 +29,7 @@
     </div>
 
     <div class="table-items-row-details" *ngIf="isEditing">
-        <form [formGroup]="editForm.form" (ngSubmit)="save()">
+        <form (ngSubmit)="save()">
             <div class="table-items-row-details-tabs clearfix">
                 <div class="float-right">
                     <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
@@ -38,7 +38,7 @@
             </div>
 
             <div class="table-items-row-details-tab">
-                <div class="form-group row no-gutters" *ngFor="let control of editForm.form.controls; let i = index">
+                <div class="form-group row no-gutters" *ngFor="let control of editForm.controls; let i = index">
                     <div class="col">
                         <sqx-control-errors [for]="control" [fieldName]="'Permission'" [submitted]="editForm.submitted | async"></sqx-control-errors>
 

src/Squidex/app/features/settings/pages/workflows/workflow-step.component.ts

@@ -23,6 +23,8 @@ import {
     templateUrl: './workflow-step.component.html'
 })
 export class WorkflowStepComponent implements OnChanges {
+    public readonly onBlur: { updateOn: 'blur' } = { updateOn: 'blur' };
+
     @Output()
     public makeInitial = new EventEmitter();
 
@@ -56,8 +58,6 @@ export class WorkflowStepComponent implements OnChanges {
     @Input()
     public disabled: boolean;
 
-    public onBlur = { updateOn: 'blur' };
-
     public openSteps: ReadonlyArray<WorkflowStep>;
     public openStep: WorkflowStep;
 

src/Squidex/app/features/settings/pages/workflows/workflow-transition.component.ts

@@ -19,6 +19,8 @@ import {
     templateUrl: './workflow-transition.component.html'
 })
 export class WorkflowTransitionComponent {
+    public readonly onBlur: { updateOn: 'blur' } = { updateOn: 'blur' };
+
     @Output()
     public update = new EventEmitter<WorkflowTransitionValues>();
 
@@ -34,8 +36,6 @@ export class WorkflowTransitionComponent {
     @Input()
     public disabled: boolean;
 
-    public onBlur = { updateOn: 'blur' };
-
     public changeExpression(expression: string) {
         this.update.emit({ expression });
     }

src/Squidex/app/features/settings/pages/workflows/workflow.component.ts

@@ -28,6 +28,8 @@ import {
     templateUrl: './workflow.component.html'
 })
 export class WorkflowComponent implements OnChanges {
+    public readonly onBlur: { updateOn: 'blur' } = { updateOn: 'blur' };
+
     @Input()
     public workflow: WorkflowDto;
 
@@ -39,8 +41,6 @@ export class WorkflowComponent implements OnChanges {
 
     public error: string | null;
 
-    public onBlur = { updateOn: 'blur' };
-
     public isEditing = false;
     public isEditable = false;
 
@@ -123,7 +123,7 @@ export class WorkflowComponent implements OnChanges {
         this.workflow = this.workflow.removeStep(step.name);
     }
 
-    public trackByStep(step: WorkflowStep) {
+    public trackByStep(index: number, step: WorkflowStep) {
         return step.name;
     }
 }

src/Squidex/app/framework/angular/forms/form-error.component.ts

@@ -17,5 +17,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 })
 export class FormErrorComponent {
     @Input()
-    public error: string;
+    public error: string | null | undefined;
 }

src/Squidex/app/framework/angular/status-icon.component.ts

@@ -15,7 +15,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 })
 export class StatusIconComponent {
     @Input()
-    public status: 'Started' | 'Failed' | 'Success' | 'Completed' | 'Failed' | 'Pending';
+    public status: 'Started' | 'Failed' | 'Success' | 'Completed' | 'Pending';
 
     @Input()
     public statusText: string;

src/Squidex/app/shared/components/assets-list.component.html

@@ -25,7 +25,7 @@
         <sqx-asset *ngFor="let asset of assets; trackBy: trackByAsset" [asset]="asset"
             [isListView]="isListView"
             [isDisabled]="isDisabled"
-            [isSelectable]="selectedIds"
+            [isSelectable]="!!selectedIds"
             [isSelected]="isSelected(asset)"
             [allTags]="tags"
             (update)="update(asset)"

src/Squidex/app/shared/components/history-list.component.ts

@@ -17,7 +17,7 @@ import { HistoryEventDto } from '@app/shared/internal';
 })
 export class HistoryListComponent {
     @Input()
-    public events: HistoryEventDto;
+    public events: ReadonlyArray<HistoryEventDto>;
 
     public trackByEvent(index: number, event: HistoryEventDto) {
         return event.eventId;

src/Squidex/app/shared/components/pipes.ts

@@ -67,7 +67,7 @@ export class HistoryMessagePipe implements OnDestroy, PipeTransform {
 
 class UserAsyncPipe implements OnDestroy {
     private lastUserId: string;
-    private lastValue: string | null = null;
+    private lastValue: string | undefined = undefined;
     private subscription: Subscription;
 
     constructor(loading: string,
@@ -83,7 +83,7 @@ class UserAsyncPipe implements OnDestroy {
         }
     }
 
-    protected transformInternal(userId: string, transform: (users: UsersProviderService) => Observable<string | null>): string | null {
+    protected transformInternal(userId: string, transform: (users: UsersProviderService) => Observable<string | null>) {
         if (this.lastUserId !== userId) {
             this.lastUserId = userId;
 
@@ -92,7 +92,7 @@ class UserAsyncPipe implements OnDestroy {
             }
 
             this.subscription = transform(this.users).subscribe(value => {
-                this.lastValue = value;
+                this.lastValue = value || undefined;
 
                 this.changeDetector.markForCheck();
             });
@@ -111,7 +111,7 @@ export class UserNamePipe extends UserAsyncPipe implements PipeTransform {
         super('Loading...', users, changeDetector);
     }
 
-    public transform(userId: string, placeholder = 'Me'): string | null {
+    public transform(userId: string, placeholder = 'Me') {
         return super.transformInternal(userId, users => users.getUser(userId, placeholder).pipe(map(u => u.displayName)));
     }
 }
@@ -125,7 +125,7 @@ export class UserNameRefPipe extends UserAsyncPipe implements PipeTransform {
         super('Loading...', users, changeDetector);
     }
 
-    public transform(userId: string, placeholder: string | null = 'Me'): string | null {
+    public transform(userId: string, placeholder: string | null = 'Me') {
         return super.transformInternal(userId, users => {
             const parts = userId.split(':');
 
@@ -183,7 +183,7 @@ export class UserPicturePipe extends UserAsyncPipe implements PipeTransform {
         super('', users, changeDetector);
     }
 
-    public transform(userId: string): string | null {
+    public transform(userId: string) {
         return super.transformInternal(userId, users => users.getUser(userId).pipe(map(u => this.apiUrl.buildUrl(`api/users/${u.id}/picture`))));
     }
 }
@@ -199,7 +199,7 @@ export class UserPictureRefPipe extends UserAsyncPipe implements PipeTransform {
         super('', users, changeDetector);
     }
 
-    public transform(userId: string): string | null {
+    public transform(userId: string) {
         return super.transformInternal(userId, users => {
             const parts = userId.split(':');
 

src/Squidex/app/shared/components/queries/filter-logical.component.html

@@ -2,10 +2,10 @@
     <div class="row no-gutters">
         <div class="col">
             <div class="btn-group">
-                <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="filter.and" [disabled]="filter.and" (click)="toggleType()">
+                <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="isAnd" [disabled]="isAnd" (click)="toggleType()">
                     AND
                 </button>
-                <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="filter.or" [disabled]="filter.or" (click)="toggleType()">
+                <button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="isOr" [disabled]="isOr" (click)="toggleType()">
                     OR
                 </button>
             </div>

src/Squidex/app/shared/components/queries/filter-logical.component.ts

@@ -58,6 +58,14 @@ export class FilterLogicalComponent {
         return this.filterValue;
     }
 
+    public get isAnd() {
+        return !!this.filter.and;
+    }
+
+    public get isOr() {
+        return !!this.filter.or;
+    }
+
     public get nestedLevel() {
         return this.level + 1;
     }

src/Squidex/app/shared/components/references-dropdown.component.ts

@@ -9,11 +9,11 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Inpu
 import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
-    AppLanguageDto,
     AppsState,
     ContentDto,
     ContentsService,
     getContentValue,
+    LanguageDto,
     StatefulControlComponent,
     Types,
     UIOptions
@@ -49,7 +49,7 @@ const NO_EMIT = { emitEvent: false };
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ReferencesDropdownComponent extends StatefulControlComponent<State, ReadonlyArray<string> | string> implements OnInit {
-    private languageField: AppLanguageDto;
+    private languageField: LanguageDto;
     private selectedId: string | undefined;
     private itemCount: number;
 
@@ -60,7 +60,7 @@ export class ReferencesDropdownComponent extends StatefulControlComponent<State,
     public mode: 'Array' | 'Single';
 
     @Input()
-    public set language(value: AppLanguageDto) {
+    public set language(value: LanguageDto) {
         this.languageField = value;
 
         this.next(s => ({ ...s, contentNames: this.createContentNames(s.contents) }));

src/Squidex/app/shared/services/backups.service.spec.ts

@@ -198,7 +198,7 @@ describe('BackupsService', () => {
             stopped: id % 2 === 0 ? `${id % 1000 + 2000}-11-11T10:10:00` : null,
             handledEvents: id * 17,
             handledAssets: id * 23,
-            status: id % 2 === 0 ? 'Status' : 'Failed',
+            status: id % 2 === 0 ? 'Success' : 'Failed',
             _links: {
                 download: { method: 'GET', href: '/api/backups/1' }
             }
@@ -217,5 +217,5 @@ export function createBackup(id: number) {
         id % 2 === 0 ? DateTime.parseISO_UTC(`${id % 1000 + 2000}-11-11T10:10:00`) : null,
         id * 17,
         id * 23,
-        id % 2 === 0 ? 'Status' : 'Failed');
+        id % 2 === 0 ? 'Success' : 'Failed');
 }

src/Squidex/app/shared/services/backups.service.ts

@@ -46,7 +46,7 @@ export class BackupDto {
         public readonly stopped: DateTime | null,
         public readonly handledEvents: number,
         public readonly handledAssets: number,
-        public readonly status: string
+        public readonly status: 'Started' | 'Failed' | 'Success' | 'Completed' | 'Pending'
     ) {
         this._links = links;
 

src/Squidex/app/shared/services/rules.service.ts

@@ -24,14 +24,14 @@ import {
     Version
 } from '@app/framework';
 
-export type TriggerDto = {
+export type RuleElementMetadataDto = {
     description: string;
     display: string;
     iconColor: string;
     iconCode: string;
 };
 
-export type TriggersDto = { [key: string]: TriggerDto };
+export type TriggersDto = { [key: string]: RuleElementMetadataDto };
 
 export const ALL_TRIGGERS: TriggersDto = {
     'ContentChanged': {

src/Squidex/app/shared/state/query.ts

@@ -82,7 +82,7 @@ export type SortMode = 'ascending' | 'descending';
 
 export interface Query {
     // The optional filter.
-    filter?: FilterNode;
+    filter?: FilterLogical;
 
     // The full text search.
     fullText?: string;

src/Squidex/app/shared/state/roles.forms.ts

@@ -14,6 +14,10 @@ import {
 } from '@app/framework';
 
 export class EditPermissionsForm extends Form<FormArray, ReadonlyArray<string>> {
+    public get controls() {
+        return this.form.controls as FormControl[];
+    }
+
     constructor() {
         super(new FormArray([]));
     }

src/Squidex/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@angular/animations": "8.2.9",
-    "@angular/cdk": "^8.2.3",
+    "@angular/cdk": "8.2.3",
     "@angular/common": "8.2.9",
     "@angular/core": "8.2.9",
     "@angular/forms": "8.2.9",