feat(employee): Utförande verksamheter select is now wrapping long text instead of ellipsis. Also when toggling the "Alla utförande verksamheter" checkbox the select is resetted. (TV-620)

Squashed commit of the following:

commit 93d305948a5b5570882f1bbcafcef539105f7da5
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Sep 20 13:45:35 2021 +0200

    Updated utförande verksamheter to make the text visible with large texts

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts

@@ -102,8 +102,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
             this.utforandeVerksamheterFormControlName,
             this.utforandeVerksamheterService.getTreeNodeDataFromUtforandeVerksamheter(
               this.availableUtforandeVerksamheter,
-              this.employee?.utforandeVerksamheter,
-              this.employee?.allaUtforandeVerksamheter
+              this.employee?.utforandeVerksamheter
             ),
           ],
         ])
@@ -174,8 +173,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
         utforandeVerksamheter: new FormControl(
           this.utforandeVerksamheterService.getTreeNodeDataFromUtforandeVerksamheter(
             this.availableUtforandeVerksamheter,
-            this.employee?.utforandeVerksamheter,
-            this.employee?.allaUtforandeVerksamheter
+            this.employee?.utforandeVerksamheter
           ),
           []
         ),

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html

@@ -80,12 +80,11 @@
       [attr.aria-controls]="'expansion-panel-'+node.uuid"
       (click)="onSetExpandedChild(parentNode, node)"
     >
-      <span class="expanded-tree-node__child-node-expansion-btn__text">{{node.label}}</span>
       <span
-        class="expanded-tree-node__child-node-expansion-btn__has-selection-dot"
-        *ngIf="hasSelectedDescendant(node)"
-        aria-hidden="true"
-      ></span>
+        class="expanded-tree-node__child-node-expansion-btn__text"
+        [ngClass]="{'expanded-tree-node__child-node-expansion-btn__text--selected': hasSelectedDescendant(node)}"
+        >{{node.label}}</span
+      >
       <digi-icon-arrow-right class="expanded-tree-node__child-node-expansion-btn__icon"></digi-icon-arrow-right>
     </button>
     <div

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss

@@ -42,9 +42,6 @@
       h5,
       h6 {
         max-width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
       }
     }
   }
@@ -74,7 +71,7 @@
   }
 
   &__child-node-expansion-btn {
-    display: inline-flex;
+    display: flex;
     padding: 0.3125rem 0.9375rem;
     justify-content: space-between;
     width: 100%;
@@ -83,10 +80,8 @@
     border-width: 0;
     background-color: transparent;
     align-items: center;
-    white-space: nowrap;
     font-size: var(--digi--typography--font-size--s);
-    text-align: center;
-    position: relative;
+    gap: var(--digi--layout--gutter--s);
 
     &:hover,
     &:focus {
@@ -104,21 +99,22 @@
     }
 
     &__text {
+      display: flex;
+      align-items: center;
       text-align: left;
+      position: relative;
       flex-grow: 1;
-      margin-right: $digi--layout--gutter--s;
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+      padding-right: 1.2em;
 
-    &__has-selection-dot {
-      width: 1rem;
-      height: 1rem;
-      border-radius: 50%;
-      background-color: var(--digi--ui--color--success);
-      margin-right: $digi--layout--gutter--s;
+      &--selected::after {
+        content: '';
+        width: 1em;
+        height: 1em;
+        border-radius: 100%;
+        background-color: var(--digi--ui--color--success);
+        position: absolute;
+        right: 0;
+      }
     }
 
     &__icon {

apps/mina-sidor-fa/src/app/shared/services/utforande-verksamheter/utforande-verksamheter.service.ts

@@ -41,8 +41,7 @@ export class UtforandeVerksamheterService {
 
   getTreeNodeDataFromUtforandeVerksamheter(
     availableUtforandeVerksamhetList: UtforandeVerksamhet[],
-    selectedUtforandeVerksamhetList: EmployeeUtforandeVerksamhet[],
-    selectAll = false
+    selectedUtforandeVerksamhetList: EmployeeUtforandeVerksamhet[]
   ): TreeNode | null {
     let treeNode: TreeNode | null = null;
 
@@ -66,17 +65,18 @@ export class UtforandeVerksamheterService {
           const utforandeVerksahmetTreeNode: TreeNode = {
             label: utforandeVerksamhet.name,
             toggleAllChildrenLabel: 'Välj alla adresser',
-            isSelected:
-              selectAll || this.isSelectedUtforandeVerksamhet(utforandeVerksamhet, selectedUtforandeVerksamhetList),
+            isSelected: this.isSelectedUtforandeVerksamhet(utforandeVerksamhet, selectedUtforandeVerksamhetList),
             value: utforandeVerksamhet,
             childItemType: 'Adresser',
             children: utforandeVerksamhet.adresser
               ? utforandeVerksamhet.adresser.map(adress => {
                   return {
                     label: adress.name,
-                    isSelected:
-                      selectAll ||
-                      this.isSelectedUtforandeAdress(utforandeVerksamhet.id, adress, selectedUtforandeVerksamhetList),
+                    isSelected: this.isSelectedUtforandeAdress(
+                      utforandeVerksamhet.id,
+                      adress,
+                      selectedUtforandeVerksamhetList
+                    ),
                     value: adress,
                   };
                 })