Added possibility to close utförande verksamheter dialog when clicking outside.

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))

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;

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;

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:

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

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);

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))

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);
+}

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 {