From 515fc199b065f88775836a9e53892ae58c814161 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Fri, 28 Dec 2018 11:27:17 +0100
Subject: [PATCH] Three state toggle.

---
 .../framework/angular/forms/toggle.component.html  |  2 +-
 .../framework/angular/forms/toggle.component.ts    | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Squidex/app/framework/angular/forms/toggle.component.html b/src/Squidex/app/framework/angular/forms/toggle.component.html
index 1e98594bc..8c774acff 100644
--- a/src/Squidex/app/framework/angular/forms/toggle.component.html
+++ b/src/Squidex/app/framework/angular/forms/toggle.component.html
@@ -1,4 +1,4 @@
-<div class="toggle-container" (click)="changeState()"
+<div class="toggle-container" (click)="changeState($event)"
     [class.disabled]="isDisabled"
     [class.checked]="isChecked === true" 
     [class.unchecked]="isChecked === false">
diff --git a/src/Squidex/app/framework/angular/forms/toggle.component.ts b/src/Squidex/app/framework/angular/forms/toggle.component.ts
index 407636cd7..4d18fbbdf 100644
--- a/src/Squidex/app/framework/angular/forms/toggle.component.ts
+++ b/src/Squidex/app/framework/angular/forms/toggle.component.ts
@@ -53,12 +53,22 @@ export class ToggleComponent implements ControlValueAccessor {
         this.callTouched = fn;
     }
 
-    public changeState() {
+    public changeState(event: MouseEvent) {
         if (this.isDisabled) {
             return;
         }
 
-        this.isChecked = !(this.isChecked === true);
+        if (event.ctrlKey || event.shiftKey) {
+            if (this.isChecked) {
+                this.isChecked = null;
+            } else if (this.isChecked === null) {
+                this.isChecked = false;
+            } else {
+                this.isChecked = true;
+            }
+        } else {
+            this.isChecked = !(this.isChecked === true);
+        }
 
         this.callChange(this.isChecked);
         this.callTouched();