Ctrl click for content items.

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

@@ -1,4 +1,4 @@
-<tr [routerLink]="link">
+<tr [sqxTabRouterLink]="link">
     <td class="cell-select inline-edit" sqxStopClick>
         <input type="checkbox" class="form-check"
             [ngModel]="selected" 

frontend/app/framework/angular/tab-router-link.directive.ts

@@ -0,0 +1,38 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Directive, HostListener, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Directive({
+    selector: '[sqxTabRouterLink]'
+})
+export class TabRouterlinkDirective {
+    @Input('sqxTabRouterLink')
+    public commands: any;
+
+    constructor(
+        private readonly router: Router,
+        private readonly route: ActivatedRoute
+    ) {
+    }
+
+    @HostListener('click', ['$event'])
+    public onClick(event: MouseEvent) {
+        const urlTree = this.router.createUrlTree(this.commands, {
+            relativeTo: this.route
+        });
+
+        if (event.ctrlKey) {
+            const url = this.router.serializeUrl(urlTree);
+
+            window.open(url, '_blank');
+        } else {
+            this.router.navigateByUrl(urlTree);
+        }
+    }
+}

frontend/app/framework/declarations.ts

@@ -70,6 +70,7 @@ export * from './angular/status-icon.component';
 export * from './angular/stop-click.directive';
 export * from './angular/sync-scrolling.directive';
 export * from './angular/sync-width.directive';
+export * from './angular/tab-router-link.directive';
 export * from './angular/template-wrapper.directive';
 export * from './angular/title.component';
 export * from './internal';

frontend/app/framework/module.ts

@@ -12,7 +12,7 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, ConfirmClickDirective, ControlErrorsComponent, CopyDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, HighlightPipe, HoverBackgroundDirective, IFrameEditorComponent, ImageSourceDirective, IndeterminateValueDirective, ISODatePipe, JsonEditorComponent, KeysPipe, KNumberPipe, LightenPipe, ListViewComponent, LoadingInterceptor, LoadingService, LocalStoreService, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MoneyPipe, MonthPipe, OnboardingService, OnboardingTooltipComponent, PagerComponent, PanelComponent, PanelContainerDirective, ParentLinkDirective, PopupLinkDirective, ProgressBarComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutService, ShortDatePipe, ShortTimePipe, StarsComponent, StatusIconComponent, StopClickDirective, SyncScollingDirective, SyncWidthDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, TooltipDirective, TransformInputDirective } from './declarations';
+import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, ConfirmClickDirective, ControlErrorsComponent, CopyDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, HighlightPipe, HoverBackgroundDirective, IFrameEditorComponent, ImageSourceDirective, IndeterminateValueDirective, ISODatePipe, JsonEditorComponent, KeysPipe, KNumberPipe, LightenPipe, ListViewComponent, LoadingInterceptor, LoadingService, LocalStoreService, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MoneyPipe, MonthPipe, OnboardingService, OnboardingTooltipComponent, PagerComponent, PanelComponent, PanelContainerDirective, ParentLinkDirective, PopupLinkDirective, ProgressBarComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutService, ShortDatePipe, ShortTimePipe, StarsComponent, StatusIconComponent, StopClickDirective, SyncScollingDirective, SyncWidthDirective, TabRouterlinkDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, TooltipDirective, TransformInputDirective } from './declarations';
 
 @NgModule({
     imports: [
@@ -87,6 +87,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
         StopClickDirective,
         SyncScollingDirective,
         SyncWidthDirective,
+        TabRouterlinkDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,
@@ -163,6 +164,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
         StopClickDirective,
         SyncScollingDirective,
         SyncWidthDirective,
+        TabRouterlinkDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,