TSLint improvements.

src/Squidex/app/features/administration/administration-area.component.html

@@ -13,6 +13,6 @@
     </ul>
 </div>
 
-<div class="panel-container">
+<div sqxPanelContainer class="panel-container">
     <router-outlet></router-outlet>
 </div>

src/Squidex/app/features/administration/pages/users/users-page.component.html

@@ -60,7 +60,7 @@
                     <ng-template ngFor let-user [ngForOf]="usersItems">
                         <tr [routerLink]="user.id" routerLinkActive="active">
                             <td>
-                                <img class="user-picture" [attr.title]="user.name" [attr.src]="user | userDtoPicture" />
+                                <img class="user-picture" [attr.title]="user.name" [attr.src]="user | sqxUserDtoPicture" />
                             </td>
                             <td>
                                 <span class="user-name table-cell">{{user.displayName}}</span>

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

@@ -13,6 +13,8 @@ import * as ReactDOM from 'react-dom';
 
 const GraphiQL = require('graphiql');
 
+/* tslint:disable:use-view-encapsulation */
+
 import {
     ApiUrlConfig,
     AppComponentBase,

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

@@ -1,6 +1,6 @@
 <div class="table-items-row" [class.invalid]="fieldForm.invalid">
     <label>
-        {{field | displayName:'properties.label':'name'}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
+        {{field | sqxDisplayName:'properties.label':'name'}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
     </label> 
     
     <span class="field-disabled" *ngIf="field.isDisabled">Disabled</span>
@@ -12,7 +12,7 @@
 
         <div *ngFor="let partition of fieldPartitions">
             <div *ngIf="partition == fieldPartition">
-                <sqx-control-errors [for]="partition" fieldName="{{field | displayName:'properties.label':'name'}}" [submitted]="contentFormSubmitted"></sqx-control-errors>
+                <sqx-control-errors [for]="partition" fieldName="{{field | sqxDisplayName:'properties.label':'name'}}" [submitted]="contentFormSubmitted"></sqx-control-errors>
 
                 <div [ngSwitch]="field.properties.fieldType">
                     <div *ngSwitchCase="'Number'">

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

@@ -52,7 +52,7 @@
                 <thead>
                     <tr>
                         <th *ngFor="let field of contentFields">
-                            <span class="field">{{field | displayName:'properties.label':'name'}}</span>
+                            <span class="field">{{field | sqxDisplayName:'properties.label':'name'}}</span>
                         </th>
                         <th>
                             Updated

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

@@ -25,7 +25,7 @@
         <div class="panel-content">
             <ul class="nav flex-column nav-dark nav-dark-bordered">
                 <li class="nav-item" *ngFor="let schema of schemasFiltered | async">
-                    <a class="nav-link" [routerLink]="schema.name" routerLinkActive="active">{{schema | displayName}} <i class="icon-angle-right"></i></a>
+                    <a class="nav-link" [routerLink]="schema.name" routerLinkActive="active">{{schema | sqxDisplayName}} <i class="icon-angle-right"></i></a>
                 </li>
             </ul>
         </div>

src/Squidex/app/features/content/shared/content-item.component.html

@@ -6,10 +6,10 @@
 <td>
     <span class="item-published" [class.unpublished]="!content.isPublished"></span>
     
-    <small class="item-modified">{{content.lastModified | fromNow}}</small>
+    <small class="item-modified">{{content.lastModified | sqxFromNow}}</small>
 </td>
 <td>
-    <img class="user-picture" [attr.title]="content.lastModifiedBy | userNameRef" [attr.src]="content.lastModifiedBy | userPictureRef" />
+    <img class="user-picture" [attr.title]="content.lastModifiedBy | sqxUserNameRef" [attr.src]="content.lastModifiedBy | sqxUserPictureRef" />
 </td>
 <td *ngIf="!isReadOnly">
     <div class="dropdown dropdown-options" *ngIf="content">

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

@@ -19,6 +19,8 @@ import {
     SchemaDto
 } from 'shared';
 
+/* tslint:disable:component-selector */
+
 @Component({
     selector: '[sqxContent]',
     styleUrls: ['./content-item.component.scss'],

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

@@ -19,7 +19,7 @@
 
         <tbody dnd-sortable-container [sortableData]="contentItems.mutableValues">
             <ng-template ngFor let-content let-i="index" [ngForOf]="contentItems">
-                <tr [sqxContent]="content" dnd-sortable [sortableIndex]="i" (sorted)="onContentsSorted($event)"
+                <tr [sqxContent]="content" dnd-sortable [sortableIndex]="i" (sqxSorted)="onContentsSorted($event)"
                     [language]="languageSelected"
                     [schemaFields]="contentFields"
                     [schema]="schema"

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

@@ -7,7 +7,7 @@
 
 // tslint:disable:prefer-for-of
 
-import { Component, forwardRef, Input } from '@angular/core';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -34,7 +34,7 @@ export const SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     templateUrl: './references-editor.component.html',
     providers: [SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR]
 })
-export class ReferencesEditorComponent extends AppComponentBase implements ControlValueAccessor {
+export class ReferencesEditorComponent extends AppComponentBase implements ControlValueAccessor, OnInit {
     private changeCallback: (value: any) => void = NOOP;
     private touchedCallback: () => void = NOOP;
 

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

@@ -30,7 +30,7 @@
             </div>
 
             <h3 class="panel-title">
-                {{schemaInformation | displayName}} <i class="schema-edit icon-pencil" (click)="editSchemaDialog.show()"></i>
+                {{schemaInformation | sqxDisplayName}} <i class="schema-edit icon-pencil" (click)="editSchemaDialog.show()"></i>
             </h3>
         </div>
 
@@ -41,7 +41,7 @@
 
     <div class="panel-main">
         <div class="panel-content panel-content-scroll" dnd-sortable-container [sortableData]="schemaFields.mutableValues">
-            <div *ngFor="let field of schemaFields; let i = index" dnd-sortable [sortableIndex]="i" (sorted)="sortFields($event)">
+            <div *ngFor="let field of schemaFields; let i = index" dnd-sortable [sortableIndex]="i" (sqxSorted)="sortFields($event)">
                 <sqx-field [field]="field" [schemas]="schemas"
                     (disabling)="disableField(field)"
                     (deleting)="deleteField(field)"

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.html

@@ -7,7 +7,7 @@
         </div>
     </div>
 
-    <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
+    <div class="form-group row" *ngIf="showDefaultValue | async">
         <label class="col col-3 col-form-checkbox-label" for="field-default-value">Default Value</label>
 
         <div class="col col-6">

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.ts

@@ -23,15 +23,15 @@ export class BooleanValidationComponent implements OnInit {
     @Input()
     public properties: BooleanFieldPropertiesDto;
 
-    public hideDefaultValue: Observable<boolean>;
+    public showDefaultValue: Observable<boolean>;
 
     public ngOnInit() {
         this.editForm.addControl('defaultValue',
             new FormControl(this.properties.defaultValue));
 
-        this.hideDefaultValue =
+        this.showDefaultValue =
             this.editForm.controls['isRequired'].valueChanges
                 .startWith(this.properties.isRequired)
-                .map(x => !!x);
+                .map(x => !x);
     }
 }

src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.html

@@ -23,7 +23,7 @@
         </div>
     </div>
 
-    <div *ngIf="!(hideDefaultValues | async)">
+    <div *ngIf="showDefaultValues | async">
         <div class="form-group row">
             <label class="col col-3 col-form-label">Default Mode:</label>
 
@@ -35,7 +35,7 @@
             </div>
         </div>
 
-        <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
+        <div class="form-group row" *ngIf="showDefaultValue | async">
             <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
             <div class="col col-9">

src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.ts

@@ -23,8 +23,8 @@ export class DateTimeValidationComponent implements OnInit {
     @Input()
     public properties: DateTimeFieldPropertiesDto;
 
-    public hideDefaultValues: Observable<boolean>;
-    public hideDefaultValue: Observable<boolean>;
+    public showDefaultValues: Observable<boolean>;
+    public showDefaultValue: Observable<boolean>;
 
     public calculatedDefaultValues = ['Now', 'Today'];
 
@@ -47,14 +47,14 @@ export class DateTimeValidationComponent implements OnInit {
                 ValidatorsEx.validDateTime()
             ]));
 
-        this.hideDefaultValues =
+        this.showDefaultValues =
             this.editForm.controls['isRequired'].valueChanges
                 .startWith(this.properties.isRequired)
-                .map(x => !!x);
+                .map(x => !x);
 
-        this.hideDefaultValue =
+        this.showDefaultValue =
             this.editForm.controls['calculatedDefaultValue'].valueChanges
                 .startWith(this.properties.calculatedDefaultValue)
-                .map(x => !!x);
+                .map(x => !x);
     }
 }

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.html

@@ -20,7 +20,7 @@
         </div>
     </div>
 
-    <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
+    <div class="form-group row" *ngIf="showDefaultValue | async">
         <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
         <div class="col col-6">

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.ts

@@ -23,7 +23,7 @@ export class NumberValidationComponent implements OnInit {
     @Input()
     public properties: NumberFieldPropertiesDto;
 
-    public hideDefaultValue: Observable<boolean>;
+    public showDefaultValue: Observable<boolean>;
 
     public ngOnInit() {
         this.editForm.addControl('maxValue',
@@ -35,9 +35,9 @@ export class NumberValidationComponent implements OnInit {
         this.editForm.addControl('defaultValue',
             new FormControl(this.properties.defaultValue));
 
-        this.hideDefaultValue =
+        this.showDefaultValue =
             this.editForm.controls['isRequired'].valueChanges
                 .startWith(this.properties.isRequired)
-                .map(x => !!x);
+                .map(x => !x);
     }
 }

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.html

@@ -27,7 +27,7 @@
             <input type="text" class="form-control" id="field-pattern" formControlName="pattern" placeholder="Regex Pattern" />
         </div>
     </div>
-    <div class="form-group row" *ngIf="!(hidePatternMessage | async)">
+    <div class="form-group row" *ngIf="showPatternMessage | async">
         <label class="col col-3 col-form-label" for="field-pattern-message">Pattern Message</label>
 
         <div class="col col-6">
@@ -35,7 +35,7 @@
         </div>
     </div>
 
-    <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
+    <div class="form-group row" *ngIf="showDefaultValue | async">
         <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
         <div class="col col-6">

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.ts

@@ -25,8 +25,8 @@ export class StringValidationComponent implements OnDestroy, OnInit {
     @Input()
     public properties: StringFieldPropertiesDto;
 
-    public hideDefaultValue: Observable<boolean>;
-    public hidePatternMessage: Observable<boolean>;
+    public showDefaultValue: Observable<boolean>;
+    public showPatternMessage: Observable<boolean>;
 
     public ngOnDestroy() {
         this.patternSubscription.unsubscribe();
@@ -48,15 +48,15 @@ export class StringValidationComponent implements OnDestroy, OnInit {
         this.editForm.setControl('defaultValue',
             new FormControl(this.properties.defaultValue));
 
-        this.hideDefaultValue =
+        this.showDefaultValue =
             this.editForm.controls['isRequired'].valueChanges
                 .startWith(this.properties.isRequired)
-                .map(x => !!x);
+                .map(x => !x);
 
-        this.hidePatternMessage =
+        this.showPatternMessage =
             this.editForm.controls['pattern'].valueChanges
                 .startWith('')
-                .map(x => !x || x.trim().length === 0);
+                .map(x => x && x.trim().length > 0);
 
         this.patternSubscription =
             this.editForm.controls['pattern'].valueChanges.subscribe((value: string) => {

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

@@ -33,15 +33,15 @@
                     <a class="nav-link" [routerLink]="[schema.name]" routerLinkActive="active">
                         <div class="row">
                             <div class="col col-4">
-                                <span class="schema-name">{{schema | displayName:'properties.label':'name'}}</span> 
+                                <span class="schema-name">{{schema | sqxDisplayName:'properties.label':'name'}}</span> 
                             </div>
                             <div class="col col-4">
                                 <span class="schema-user">
-                                    <i class="icon-user"></i> {{schema.lastModifiedBy | userNameRef}}
+                                    <i class="icon-user"></i> {{schema.lastModifiedBy | sqxUserNameRef}}
                                 </span>
                             </div>
                             <div class="col col-4 schema-modified">
-                                <small class="item-modified">{{schema.lastModified | fromNow}}</small>
+                                <small class="item-modified">{{schema.lastModified | sqxFromNow}}</small>
                                 
                                 <span class="item-published" [class.unpublished]="!schema.isPublished"></span>
                             </div>

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

@@ -15,7 +15,7 @@
                 <div class="client-header">
                     <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm" (ngSubmit)="rename()">
                         <div class="form-group mr-1">
-                            <sqx-control-errors for="name" [submitted]="renameFormSubmitted"></sqx-control-errors>
+                            <sqx-control-errors for="name"></sqx-control-errors>
                             
                             <input type="text" class="form-control client-name enabled" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" />
                         </div>

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -30,13 +30,13 @@
                     <ng-template ngFor let-contributor [ngForOf]="appContributors">
                         <tr>
                             <td>
-                                <img class="user-picture" [attr.title]="contributor.contributorId | userName" [attr.src]="contributor.contributorId | userPicture" />
+                                <img class="user-picture" [attr.title]="contributor.contributorId | sqxUserName" [attr.src]="contributor.contributorId | sqxUserPicture" />
                             </td>
                             <td>
-                                <span class="user-name table-cell">{{contributor.contributorId | userName}}</span>
+                                <span class="user-name table-cell">{{contributor.contributorId | sqxUserName}}</span>
                             </td>
                             <td>
-                                <span class="user-email table-cell">{{contributor.contributorId | userEmail}}</span>
+                                <span class="user-email table-cell">{{contributor.contributorId | sqxUserEmail}}</span>
                             </td>
                             <td>
                                 <select class="form-control" [ngModel]="contributor.permission" (ngModelChange)="changePermission(contributor, $event)" [disabled]="currentUserId === contributor.contributorId">
@@ -59,7 +59,7 @@
                     <div class="form-group mr-1">
                         <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="'contributor'" placeholder="Find existing user" displayProperty="email">
                             <ng-template let-user="$implicit">
-                                <img class="user-picture autocomplete-user-picture" [attr.src]="user | userDtoPicture" />
+                                <img class="user-picture autocomplete-user-picture" [attr.src]="user | sqxUserDtoPicture" />
 
                                 <span class="user-name autocomplete-user-name">{{user.displayName}}</span>
                                 <span class="user-email autocomplete-user-email">{{user.email}}</span>

src/Squidex/app/framework/angular/autocomplete.component.html

@@ -6,7 +6,7 @@
         autocapitalize="off">
 
     <div *ngIf="items.length > 0" [sqxModalTarget]="input" class="control-dropdown" #container>
-        <div *ngFor="let item of items; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" [class.active]="i === selectedIndex" (mousedown)="selectItem(item)" (mouseover)="selectIndex(i)" [sqxScrollActive]="i === itemSelection" [container]="container">
+        <div *ngFor="let item of items; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" [class.active]="i === selectedIndex" (mousedown)="selectItem(item)" (mouseover)="selectIndex(i)" [sqxScrollActive]="i === selectedIndex" [container]="container">
             <span *ngIf="!itemTemplate">{{item}}</span>
 
             <ng-template *ngIf="itemTemplate" [sqxTemplateWrapper]="itemTemplate" [item]="item" [index]="i"></ng-template>

src/Squidex/app/framework/angular/autocomplete.component.ts

@@ -159,6 +159,18 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O
         }
     }
 
+    public selectIndex(selection: number) {
+        if (selection < 0) {
+            selection = 0;
+        }
+
+        if (selection >= this.items.length) {
+            selection = this.items.length - 1;
+        }
+
+        this.selectedIndex = selection;
+    }
+
     private up() {
         this.selectIndex(this.selectedIndex - 1);
     }
@@ -171,18 +183,6 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O
         this.queryInput.setValue('');
     }
 
-    private selectIndex(selection: number) {
-        if (selection < 0) {
-            selection = 0;
-        }
-
-        if (selection >= this.items.length) {
-            selection = this.items.length - 1;
-        }
-
-        this.selectedIndex = selection;
-    }
-
     private reset() {
         this.items = [];
         this.selectedIndex = -1;

src/Squidex/app/framework/angular/cloak.directive.ts

@@ -8,7 +8,7 @@
 import { Directive, ElementRef, OnInit, Renderer } from '@angular/core';
 
 @Directive({
-    selector: '.sqx-cloak'
+    selector: '[sqxCloak]'
 })
 export class CloakDirective implements OnInit {
     constructor(

src/Squidex/app/framework/angular/date-time.pipes.ts

@@ -5,76 +5,76 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Pipe } from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 import { DateTime } from './../utils/date-time';
 import { Duration } from './../utils/duration';
 
 @Pipe({
-    name: 'shortDate',
+    name: 'sqxShortDate',
     pure: true
 })
-export class ShortDatePipe {
+export class ShortDatePipe implements PipeTransform {
     public transform(value: DateTime): any {
         return value.toStringFormat('DD.MMM');
     }
 }
 
 @Pipe({
-    name: 'month',
+    name: 'sqxMonth',
     pure: true
 })
-export class MonthPipe {
+export class MonthPipe implements PipeTransform {
     public transform(value: DateTime): any {
         return value.toStringFormat('MMMM');
     }
 }
 
 @Pipe({
-    name: 'fromNow',
+    name: 'sqxFromNow',
     pure: true
 })
-export class FromNowPipe {
+export class FromNowPipe implements PipeTransform {
     public transform(value: DateTime): any {
         return value.toFromNow();
     }
 }
 
 @Pipe({
-    name: 'dayOfWeek',
+    name: 'sqxDayOfWeek',
     pure: true
 })
-export class DayOfWeekPipe {
+export class DayOfWeekPipe implements PipeTransform {
     public transform(value: DateTime): any {
         return value.toStringFormat('dd');
     }
 }
 
 @Pipe({
-    name: 'day',
+    name: 'sqxDay',
     pure: true
 })
-export class DayPipe {
+export class DayPipe implements PipeTransform {
     public transform(value: DateTime): any {
         return value.toStringFormat('DD');
     }
 }
 
 @Pipe({
-    name: 'shortTime',
+    name: 'sqxShortTime',
     pure: true
 })
-export class ShortTimePipe {
+export class ShortTimePipe implements PipeTransform {
     public transform(value: DateTime): any {
         return value.toStringFormat('HH:mm');
     }
 }
 
 @Pipe({
-    name: 'duration',
+    name: 'sqxDuration',
     pure: true
 })
-export class DurationPipe {
+export class DurationPipe implements PipeTransform {
     public transform(value: Duration): any {
         return value.toString();
     }

src/Squidex/app/framework/angular/http-extensions-impl.ts

@@ -20,11 +20,12 @@ export class EntityCreatedDto {
 export class ErrorDto {
     public get displayMessage(): string {
         let result = this.message;
+        let lastChar = '';
 
         if (this.details && this.details.length > 0) {
             const detailMessage = this.details[0];
 
-            const lastChar = result[result.length - 1];
+            lastChar = result[result.length - 1];
 
             if (lastChar !== '.' && lastChar !== ',') {
                 result += '.';
@@ -34,7 +35,7 @@ export class ErrorDto {
             result += detailMessage;
         }
 
-        const lastChar = result[result.length - 1];
+        lastChar = result[result.length - 1];
 
         if (lastChar !== '.') {
             result += '.';

src/Squidex/app/framework/angular/http-extensions.ts

@@ -9,6 +9,8 @@ import { Observable } from 'rxjs/Observable';
 
 import { pretifyError } from './http-extensions-impl';
 
+/* tslint:disable:no-shadowed-variable */
+
 declare module 'rxjs/Observable' {
     interface Observable<T> {
         pretifyError(message: string): Observable<any>;

src/Squidex/app/framework/angular/image-source.directive.ts

@@ -12,7 +12,7 @@ import { MathHelper } from './../utils/math-helper';
 @Directive({
     selector: '[sqxImageSource]'
 })
-export class ImageSourceComponent implements OnChanges, OnInit, AfterViewInit {
+export class ImageSourceDirective implements OnChanges, OnInit, AfterViewInit {
     private retries = 0;
     private query: string | null = null;
 

src/Squidex/app/framework/angular/indeterminate-value.directive.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Directive, forwardRef, ElementRef, Renderer } from '@angular/core';
+import { Directive, forwardRef, ElementRef, HostListener, Renderer } from '@angular/core';
 import { ControlValueAccessor,  NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const NOOP = () => { /* NOOP */ };
@@ -16,10 +16,7 @@ export const SQX_INDETERMINATE_VALUE_CONTROL_VALUE_ACCESSOR: any = {
 
 @Directive({
     selector: '[sqxIndeterminateValue]',
-    providers: [SQX_INDETERMINATE_VALUE_CONTROL_VALUE_ACCESSOR],
-    host: {
-        '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'
-    }
+    providers: [SQX_INDETERMINATE_VALUE_CONTROL_VALUE_ACCESSOR]
 })
 export class IndeterminateValueDirective implements ControlValueAccessor {
     private changeCallback: (value: any) => void = NOOP;
@@ -31,6 +28,16 @@ export class IndeterminateValueDirective implements ControlValueAccessor {
     ) {
     }
 
+    @HostListener('onChange', ['$event.target.value'])
+    public onChange(value: any) {
+        this.changeCallback(value);
+    }
+
+    @HostListener('blur')
+    public onTouched() {
+        this.touchedCallback();
+    }
+
     public writeValue(value: any) {
         if (value === undefined || value === null) {
             this.renderer.setElementProperty(this.element.nativeElement, 'indeterminate', true);
@@ -50,12 +57,4 @@ export class IndeterminateValueDirective implements ControlValueAccessor {
     public registerOnTouched(fn: any) {
         this.touchedCallback = fn;
     }
-
-    public onChange(value: any) {
-        this.changeCallback(value);
-    }
-
-    public onTouched() {
-        this.touchedCallback();
-    }
 }

src/Squidex/app/framework/angular/lowercase-input.directive.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Directive, forwardRef, ElementRef, Renderer } from '@angular/core';
+import { Directive, forwardRef, ElementRef, HostListener, Renderer } from '@angular/core';
 import { ControlValueAccessor,  NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const NOOP = () => { /* NOOP */ };
@@ -16,10 +16,7 @@ export const SQX_LOWERCASE_INPUT_VALUE_ACCESSOR: any = {
 
 @Directive({
     selector: '[sqxLowerCaseInput]',
-    providers: [SQX_LOWERCASE_INPUT_VALUE_ACCESSOR],
-    host: {
-        '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'
-    }
+    providers: [SQX_LOWERCASE_INPUT_VALUE_ACCESSOR]
 })
 export class LowerCaseInputDirective implements ControlValueAccessor {
     private changeCallback: (value: any) => void = NOOP;
@@ -31,6 +28,19 @@ export class LowerCaseInputDirective implements ControlValueAccessor {
     ) {
     }
 
+    @HostListener('onChange', ['$event.target.value'])
+    public onChange(value: any) {
+        const normalizedValue = (value == null ? '' : value.toString()).toLowerCase();
+
+        this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue);
+        this.changeCallback(normalizedValue);
+    }
+
+    @HostListener('blur')
+    public onTouched() {
+        this.touchedCallback();
+    }
+
     public writeValue(value: any) {
         const normalizedValue = (value == null ? '' : value.toString()).toLowerCase();
 
@@ -48,15 +58,4 @@ export class LowerCaseInputDirective implements ControlValueAccessor {
     public registerOnTouched(fn: any) {
         this.touchedCallback = fn;
     }
-
-    public onChange(value: any) {
-        const normalizedValue = (value == null ? '' : value.toString()).toLowerCase();
-
-        this.renderer.setElementProperty(this.element.nativeElement, 'value', normalizedValue);
-        this.changeCallback(normalizedValue);
-    }
-
-    public onTouched() {
-        this.touchedCallback();
-    }
 }

src/Squidex/app/framework/angular/money.pipe.ts

@@ -5,15 +5,15 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Pipe } from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 import { CurrencyConfig, DecimalSeparatorConfig } from './../configurations';
 
 @Pipe({
-    name: 'money',
+    name: 'sqxMoney',
     pure: true
 })
-export class MoneyPipe {
+export class MoneyPipe implements PipeTransform {
     constructor(
         private readonly currency: CurrencyConfig,
         private readonly separator: DecimalSeparatorConfig

src/Squidex/app/framework/angular/name.pipe.ts

@@ -5,15 +5,15 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import { Pipe } from '@angular/core';
+import { Pipe, PipeTransform } from '@angular/core';
 
 import { StringHelper } from './../utils/string-helper';
 
 @Pipe({
-    name: 'displayName',
+    name: 'sqxDisplayName',
     pure: true
 })
-export class DisplayNamePipe {
+export class DisplayNamePipe implements PipeTransform {
     public transform(value: any, field1 = 'label', field2  = 'name'): any {
         if (!value) {
             return '';

src/Squidex/app/framework/angular/panel-container.directive.ts

@@ -10,7 +10,7 @@ import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, Renderer
 import { PanelComponent } from './panel.component';
 
 @Directive({
-    selector: '.panel-container'
+    selector: '[sqxPanelContainer]'
 })
 export class PanelContainerDirective implements AfterViewInit, OnDestroy {
     private readonly panels: PanelComponent[] = [];

src/Squidex/app/framework/angular/sorted.directive.ts

@@ -15,12 +15,12 @@ import {
 } from 'ng2-dnd';
 
 @Directive({
-    selector: '[sorted]'
+    selector: '[sqxSorted]'
 })
 export class SortedDirective {
     private oldArray: any[];
 
-    @Output()
+    @Output('sqxSorted')
     public sorted = new EventEmitter<Array<any>>();
 
     constructor(

src/Squidex/app/framework/angular/template-wrapper.directive.ts

@@ -10,7 +10,7 @@ import { Directive, EmbeddedViewRef, Input, OnChanges, OnDestroy, OnInit, Simple
 @Directive({
     selector: '[sqxTemplateWrapper]'
 })
-export class TemplateWrapper implements OnInit, OnDestroy, OnChanges {
+export class TemplateWrapperDirective implements OnInit, OnDestroy, OnChanges {
     @Input()
     public item: any;
 

src/Squidex/app/framework/angular/validators.ts

@@ -14,20 +14,20 @@ import {
 import { DateTime } from './../utils/date-time';
 
 export module ValidatorsEx {
-    export function pattern(pattern: string | RegExp, message?: string): ValidatorFn {
-        if (!pattern) {
+    export function pattern(regex: string | RegExp, message?: string): ValidatorFn {
+        if (!regex) {
             return Validators.nullValidator;
         }
 
-        let regex: RegExp;
+        let regeExp: RegExp;
         let regexStr: string;
 
-        if (typeof pattern === 'string') {
-            regexStr = `^${pattern}$`;
-            regex = new RegExp(regexStr);
+        if (typeof regex === 'string') {
+            regexStr = `^${regex}$`;
+            regeExp = new RegExp(regexStr);
         } else {
-            regexStr = pattern.toString();
-            regex = pattern;
+            regexStr = regex.toString();
+            regeExp = regex;
         }
 
         return (control: AbstractControl): { [key: string]: any } => {
@@ -37,7 +37,7 @@ export module ValidatorsEx {
                 return null;
             }
 
-            if (!regex.test(n)) {
+            if (!regeExp.test(n)) {
                 if (message) {
                     return { patternmessage: { requiredPattern: regexStr, actualValue: n, message } };
                 } else {

src/Squidex/app/framework/module.ts

@@ -29,7 +29,7 @@ import {
     FocusOnInitDirective,
     FromNowPipe,
     GeolocationEditorComponent,
-    ImageSourceComponent,
+    ImageSourceDirective,
     IndeterminateValueDirective,
     JsonEditorComponent,
     LocalStoreService,
@@ -59,7 +59,7 @@ import {
     SortedDirective,
     StarsComponent,
     TagEditorComponent,
-    TemplateWrapper,
+    TemplateWrapperDirective,
     TitleService,
     TitleComponent,
     ToggleComponent,
@@ -90,7 +90,7 @@ import {
         FocusOnInitDirective,
         FromNowPipe,
         GeolocationEditorComponent,
-        ImageSourceComponent,
+        ImageSourceDirective,
         IndeterminateValueDirective,
         JsonEditorComponent,
         LowerCaseInputDirective,
@@ -114,7 +114,7 @@ import {
         SortedDirective,
         StarsComponent,
         TagEditorComponent,
-        TemplateWrapper,
+        TemplateWrapperDirective,
         TitleComponent,
         ToggleComponent,
         UserReportComponent
@@ -135,7 +135,7 @@ import {
         FocusOnInitDirective,
         FromNowPipe,
         GeolocationEditorComponent,
-        ImageSourceComponent,
+        ImageSourceDirective,
         IndeterminateValueDirective,
         JsonEditorComponent,
         LowerCaseInputDirective,
@@ -159,7 +159,7 @@ import {
         SortedDirective,
         StarsComponent,
         TagEditorComponent,
-        TemplateWrapper,
+        TemplateWrapperDirective,
         TitleComponent,
         ToggleComponent,
         UserReportComponent,

src/Squidex/app/framework/utils/immutable-array.ts

@@ -31,15 +31,15 @@ export class ImmutableArray<T> implements Iterable<T> {
         this.items = items;
     }
 
-    public static empty<T>(): ImmutableArray<T> {
+    public static empty<V>(): ImmutableArray<V> {
         return ImmutableArray.EMPTY;
     }
 
-    public static of<T>(items?: T[]): ImmutableArray<T> {
+    public static of<V>(items?: V[]): ImmutableArray<V> {
         if (!items || items.length === 0) {
             return ImmutableArray.EMPTY;
         } else {
-            return new ImmutableArray<T>(freeze([...items]));
+            return new ImmutableArray<V>(freeze([...items]));
         }
     }
 

src/Squidex/app/shared/components/asset.component.html

@@ -33,10 +33,10 @@
                     {{fileType}}
                 </span>
                 <span class="file-user">
-                    <i class="icon-user"></i> {{asset.lastModifiedBy | userNameRef}}
+                    <i class="icon-user"></i> {{asset.lastModifiedBy | sqxUserNameRef}}
                 </span>
                 <span class="file-modified">
-                    {{asset.lastModified | fromNow}}
+                    {{asset.lastModified | sqxFromNow}}
                 </span>
             </div>
         </div>

src/Squidex/app/shared/components/asset.component.ts

@@ -192,7 +192,7 @@ export class AssetComponent extends AppComponentBase implements OnInit {
         }
     }
 
-    private resetRename() {
+    public resetRename() {
         this.renameForm.enable();
         this.renameForm.controls['name'].setValue(this.asset.fileName);
         this.renameFormSubmitted = false;

src/Squidex/app/shared/components/history.component.html

@@ -13,13 +13,13 @@
         <div class="panel-content panel-content-blank">
             <div *ngFor="let event of events | async" class="event">
                 <div class="event-left">
-                    <img class="user-picture" [attr.title]="event.actor | userNameRef:'I'" [attr.src]="event.actor | userPictureRef" />
+                    <img class="user-picture" [attr.title]="event.actor | sqxUserNameRef:'I'" [attr.src]="event.actor | sqxUserPictureRef" />
                 </div>
                 <div class="event-main">
                     <div class="event-message">
-                        <span class="event-actor user-ref">{{event.actor | userNameRef:'I'}}</span> <span [innerHTML]="format(event.message) | async"></span>
+                        <span class="event-actor user-ref">{{event.actor | sqxUserNameRef:'I'}}</span> <span [innerHTML]="format(event.message) | async"></span>
                     </div>
-                    <div class="event-created">{{event.created | fromNow}}</div>
+                    <div class="event-created">{{event.created | sqxFromNow}}</div>
                 </div>
             </div>            
         </div>

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

@@ -49,7 +49,7 @@ class UserAsyncPipe implements OnDestroy {
 }
 
 @Pipe({
-    name: 'userName',
+    name: 'sqxUserName',
     pure: false
 })
 export class UserNamePipe extends UserAsyncPipe implements PipeTransform {
@@ -63,7 +63,7 @@ export class UserNamePipe extends UserAsyncPipe implements PipeTransform {
 }
 
 @Pipe({
-    name: 'userNameRef',
+    name: 'sqxUserNameRef',
     pure: false
 })
 export class UserNameRefPipe extends UserAsyncPipe implements PipeTransform {
@@ -89,7 +89,7 @@ export class UserNameRefPipe extends UserAsyncPipe implements PipeTransform {
 }
 
 @Pipe({
-    name: 'userEmail',
+    name: 'sqxUserEmail',
     pure: false
 })
 export class UserEmailPipe extends UserAsyncPipe implements PipeTransform {
@@ -103,7 +103,7 @@ export class UserEmailPipe extends UserAsyncPipe implements PipeTransform {
 }
 
 @Pipe({
-    name: 'userEmailRef',
+    name: 'sqxUserEmailRef',
     pure: false
 })
 export class UserEmailRefPipe extends UserAsyncPipe implements PipeTransform {
@@ -125,7 +125,7 @@ export class UserEmailRefPipe extends UserAsyncPipe implements PipeTransform {
 }
 
 @Pipe({
-    name: 'userDtoPicture',
+    name: 'sqxUserDtoPicture',
     pure: false
 })
 export class UserDtoPicture implements PipeTransform {
@@ -140,7 +140,7 @@ export class UserDtoPicture implements PipeTransform {
 }
 
 @Pipe({
-    name: 'userIdPicture',
+    name: 'sqxUserIdPicture',
     pure: false
 })
 export class UserIdPicturePipe implements PipeTransform {
@@ -155,7 +155,7 @@ export class UserIdPicturePipe implements PipeTransform {
 }
 
 @Pipe({
-    name: 'userPicture',
+    name: 'sqxUserPicture',
     pure: false
 })
 export class UserPicturePipe extends UserAsyncPipe implements PipeTransform {
@@ -171,7 +171,7 @@ export class UserPicturePipe extends UserAsyncPipe implements PipeTransform {
 }
 
 @Pipe({
-    name: 'userPictureRef',
+    name: 'sqxUserPictureRef',
     pure: false
 })
 export class UserPictureRefPipe extends UserAsyncPipe implements PipeTransform {

src/Squidex/app/shell/pages/app/app-area.component.html

@@ -2,6 +2,6 @@
     <sqx-left-menu></sqx-left-menu>
 </div>
 
-<div class="panel-container">
+<div sqxPanelContainer class="panel-container">
     <router-outlet></router-outlet>
 </div>

src/Squidex/app/shell/pages/home/home-page.component.ts

@@ -11,7 +11,7 @@ import { Router } from '@angular/router';
 import { AuthService } from 'shared';
 
 @Component({
-    selector: 'home-page',
+    selector: 'sqx-home-page',
     styleUrls: ['./home-page.component.scss'],
     templateUrl: './home-page.component.html'
 })

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

@@ -2,7 +2,7 @@
     <li class="nav-item dropdown">
         <span class="nav-link dropdown-toggle" (click)="modalMenu.toggle()">
             <span class="user">
-                <img class="user-picture" [attr.src]="profileId | userIdPicture" />
+                <img class="user-picture" [attr.src]="profileId | sqxUserIdPicture" />
             </span>
         </span>
 

src/Squidex/package.json

@@ -74,7 +74,7 @@
     "karma-mocha-reporter": "2.2.3",
     "karma-phantomjs-launcher": "1.0.4",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "2.0.3",
+    "karma-webpack": "2.0.4",
     "node-sass": "4.5.3",
     "noop-loader": "^1.0.0",
     "null-loader": "0.1.1",
@@ -84,7 +84,7 @@
     "sass-lint": "1.10.2",
     "sass-loader": "6.0.6",
     "style-loader": "0.18.2",
-    "tslint": "4.5.1",
+    "tslint": "5.5.0",
     "tslint-loader": "3.5.3",
     "typemoq": "1.7.0",
     "typescript": "2.4.1",
@@ -93,4 +93,4 @@
     "webpack-dev-server": "2.5.1",
     "webpack-merge": "4.1.0"
   }
-}
+}

src/Squidex/tsconfig.json

@@ -13,9 +13,15 @@
     "suppressImplicitAnyIndexErrors": true,
     "target": "es5",
     "paths": {
-        "framework": ["app/framework"],
-        "features": ["app/features"],
-        "shared": ["app/shared"]
+      "framework": [
+        "app/framework"
+      ],
+      "features": [
+        "app/features"
+      ],
+      "shared": [
+        "app/shared"
+      ]
     }
   }
 }

src/Squidex/tslint.json

@@ -1,27 +1,49 @@
 {
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
   "rules": {
+    "angular-whitespace": false,
+    "banana-in-box": true,
     "class-name": true,
     "comment-format": [
       true,
       "check-space"
     ],
+    "component-class-suffix": true,
+    "component-selector": [
+      true,
+      "element",
+      "sqx",
+      "kebab-case"
+    ],
     "curly": true,
+    "directive-class-suffix": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "sqx",
+      "camelCase"
+    ],
     "eofline": false,
     "forin": true,
     "indent": [
       true,
       "spaces"
     ],
+    "invoke-injectable": true,
     "label-position": true,
     "max-line-length": [
       true,
       240
     ],
     "member-access": [
-      true, 
+      true,
       "check-accessor"
     ],
+    "no-access-missing-member": false,
     "no-arg": true,
+    "no-attribute-parameter-decorator": true,
     "no-bitwise": true,
     "no-console": [
       true,
@@ -36,15 +58,17 @@
     "no-duplicate-variable": true,
     "no-empty": true,
     "no-eval": true,
+    "no-forward-ref": false,
     "no-inferrable-types": [
-      true, 
+      true,
       "ignore-params"
     ],
+    "no-input-rename": false,
+    "no-output-rename": false,
     "no-shadowed-variable": true,
     "no-string-literal": false,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
-    
     "no-unused-expression": true,
     "no-use-before-declare": true,
     "no-var-keyword": true,
@@ -63,6 +87,11 @@
     "ordered-imports": [
       false
     ],
+    "pipe-naming": [
+      true,
+      "camelCase",
+      "sqx"
+    ],
     "prefer-for-of": true,
     "quotemark": [
       true,
@@ -72,10 +101,13 @@
     "semicolon": [
       "always"
     ],
+    "templates-no-negated-async": true,
+    "templates-use-public": true,
+    "template-to-ng-template": true,
     "trailing-comma": [
-      true, 
+      true,
       {
-        "multiline": "never", 
+        "multiline": "never",
         "singleline": "never"
       }
     ],
@@ -93,6 +125,12 @@
         "variable-declaration": "nospace"
       }
     ],
+    "use-host-property-decorator": true,
+    "use-input-property-decorator": true,
+    "use-life-cycle-interface": true,
+    "use-output-property-decorator": true,
+    "use-pipe-transform-interface": true,
+    "use-view-encapsulation": true,
     "variable-name": false,
     "whitespace": [
       true,