From ac5b806c16367b5090e82afb178e1e56844d1933 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Mon, 13 Sep 2021 09:41:27 +0200
Subject: [PATCH] =?UTF-8?q?Added=20possibility=20to=20close=20utf=C3=B6ran?=
 =?UTF-8?q?de=20verksamheter=20dialog=20when=20clicking=20outside.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                         |  4 ++++
 .../layout/components/footer/footer.component.scss   |  2 ++
 .../layout/components/sidebar/sidebar.component.scss |  1 +
 .../shared/components/layout/layout.component.scss   |  3 ++-
 .../tree-nodes-selector.component.html               |  1 +
 .../tree-nodes-selector.component.scss               |  2 ++
 apps/mina-sidor-fa/src/assets/CHANGELOG.md           |  4 ++++
 apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss  |  9 +++++++++
 apps/mina-sidor-fa/src/styles/styles.scss            | 12 ++++++------
 9 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9084e18..3079ca3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## 1.5.1
 
+### Features
+
+- **employee:** Added possibility to close utförande verksamheter dialog when clicking outside. ([TV-578](https://jira.arbetsformedlingen.se/browse/TV-578))
+
 ### Bug Fixes
 
 - **settings:** Fixed issue with feature-toggling. Also implemented spinner when organization is changed. ([TV-583](https://jira.arbetsformedlingen.se/browse/TV-583))
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss
index 77ea0de..a87f3ab 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss
@@ -2,6 +2,8 @@
 @import 'variables/gutters';
 
 .footer {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
index 5cc5d08..37a0e7f 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
@@ -8,6 +8,7 @@
   flex-direction: column;
   position: sticky;
   top: $msfa__navigation-height;
+  z-index: 1;
 
   &__list {
     @include msfa__reset-list;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss
index daeff68..e92068e 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss
@@ -3,8 +3,9 @@
 @import 'variables/gutters';
 
 .msfa {
+  position: relative;
   display: grid;
-  height: 100vh;
+  min-height: 100vh;
   grid-template-columns: 12rem 1fr;
   grid-template-rows: auto 1fr auto;
   grid-template-areas:
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
index 0b3cdbe..ab00493 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
@@ -1,4 +1,5 @@
 <div class="tree-nodes-selector">
+  <div class="msfa__backdrop" *ngIf="displayPanel" (click)="closePanel()"></div>
   <div class="tree-nodes-selector__panel-wrapper">
     <button
       #togglePanelBtn
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss
index 8dacca5..1273f64 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss
@@ -5,6 +5,7 @@
 .tree-nodes-selector {
   &__panel-wrapper {
     position: relative;
+    z-index: 1;
   }
 
   &__toggle-panel-btn {
@@ -21,6 +22,7 @@
     color: var(--digi--ui--color--background--overlay--opaque);
     background-color: var(--digi--ui--color--background);
     border-color: var(--digi-form-select--border-color);
+    z-index: 1;
 
     &:focus {
       border-color: var(--digi--ui--color--focus--light);
diff --git a/apps/mina-sidor-fa/src/assets/CHANGELOG.md b/apps/mina-sidor-fa/src/assets/CHANGELOG.md
index 9084e18..3079ca3 100644
--- a/apps/mina-sidor-fa/src/assets/CHANGELOG.md
+++ b/apps/mina-sidor-fa/src/assets/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## 1.5.1
 
+### Features
+
+- **employee:** Added possibility to close utförande verksamheter dialog when clicking outside. ([TV-578](https://jira.arbetsformedlingen.se/browse/TV-578))
+
 ### Bug Fixes
 
 - **settings:** Fixed issue with feature-toggling. Also implemented spinner when organization is changed. ([TV-583](https://jira.arbetsformedlingen.se/browse/TV-583))
diff --git a/apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss b/apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss
new file mode 100644
index 0000000..8fde2dd
--- /dev/null
+++ b/apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss
@@ -0,0 +1,9 @@
+@mixin msfa__backdrop() {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  background-color: rgba(255, 255, 255, 0.4);
+}
diff --git a/apps/mina-sidor-fa/src/styles/styles.scss b/apps/mina-sidor-fa/src/styles/styles.scss
index 7d607ca..d299404 100644
--- a/apps/mina-sidor-fa/src/styles/styles.scss
+++ b/apps/mina-sidor-fa/src/styles/styles.scss
@@ -1,5 +1,6 @@
 @import '@digi/core/dist/digi/digi.css';
 @import 'mixins/a11y';
+@import 'mixins/backdrop';
 @import 'mixins/icon';
 @import 'mixins/link';
 
@@ -69,6 +70,10 @@ dl {
     font-size: 0.875rem !important;
   }
 
+  &__backdrop {
+    @include msfa__backdrop;
+  }
+
   &__loading-wrapper {
     display: flex;
     align-items: center;
@@ -76,12 +81,7 @@ dl {
     z-index: 1000;
 
     &--full-screen {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: rgba(255, 255, 255, 0.5);
+      @include msfa__backdrop;
     }
   }
   &__spinner {