Merge pull request #108 in TEA/mina-sidor-fa-web from feature/TV-623 to develop

Squashed commit of the following:

commit ca49a82df7d52c918ed3540bdca68d63c5c9a6bf
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Tue Sep 21 12:24:13 2021 +0200

    TV-623 Åtgärdat lintvarningar

commit f493987d3213089b7e7f2e455635b5cf13361039
Merge: cf1fa71 2dd9d3d
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Tue Sep 21 11:05:43 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit cf1fa71006576dd448b0b42c688cb43ddfff8080
Merge: acab6a9 91eeb1d
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Tue Sep 21 09:40:24 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit acab6a95ffa43d59e86e387658f97cbc2d1b01cb
Merge: b131d2f e120e50
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 17:39:07 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit b131d2fea3e1c7f3c5210d71c5258e8c14fec98d
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 17:38:06 2021 +0200

    TV-623 ensuring that changes are propagated to the form if the treeNodesSelector is closed by clicking outside of the control. Otherwise I imagine it would be quite annoying if you closed it by mistake..

commit 29537edfdbdda3382b5af8ffef8f971cbc2550c8
Merge: dc6a4ad 8da6899
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 14:08:46 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit dc6a4ad0f6629db2e001a8ffa7895026d2e1a1c0
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 13:36:24 2021 +0200

    TV-623 adjusted switch

commit bdd108b6621ca7bdef61d41d25db9ee6d35e1355
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 12:56:38 2021 +0200

    TV-623 increased min-width of control

commit a2b3d1c42fb287b45f3323a3475d02e667783c9e
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 12:18:17 2021 +0200

    TV-623 fixed linting issue in deltagare-card..

commit 9895eb7c8792977cf7f5c743041c95878003890e
Merge: 4ebafb5 ffc5a46
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 12:16:37 2021 +0200

    Merge branch 'develop' into feature/TV-623

commit 4ebafb57ef2e4bbbdcb924a1f92f0412257e11f1
Merge: af58d40 bfffed4
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 11:25:13 2021 +0200

    Merge branch 'develop' into TV-623

commit af58d4009be592115dfcd3df20a1c3a1499d5eb4
Author: arbetsformedlingen_garcn <christian.gardebrink@arbetsformedlingen.se>
Date:   Mon Sep 20 11:24:23 2021 +0200

    TV-623

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

@@ -55,6 +55,7 @@
         </p>
         <ng-container *ngIf="!isLoadingUtforandeVerksamheter else loadingUtforandeVerksamheterTemplate">
           <digi-ng-form-checkbox
+            [afId]="selectAllUtforandeVerksamheterElementId"
             class="edit-employee-form__choose-all-utforande-verksamheter"
             [formControl]="selectAllUtforandeVerksamheterFormControl"
             [afLabel]="'Välj alla utförande verksamheter och alla utförande adresser'"

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

@@ -60,6 +60,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
   readonly formUuid = uuid();
   readonly emailElementId = `email-control-${this.formUuid}`;
   readonly tjansterElementId = `tjanster-control-${this.formUuid}`;
+  readonly selectAllUtforandeVerksamheterElementId = `select-all-utforande-verksamheter-control-${this.formUuid}`;
   readonly utforandeVerksamhetElementId = `utforande-verksamhet-control-${this.formUuid}`;
   readonly firstValidationErrorLinkId = `validation-error-link-${this.formUuid}`;
 
@@ -206,7 +207,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
 
     if (this.editEmployeeFormGroup.invalid) {
       setTimeout(() => {
-        this.focusLinkElement('.error-list__validation-error-link a');
+        this.focusElement('.error-list__validation-error-link a');
       });
 
       return;
@@ -274,7 +275,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
     return validationErrorLinks;
   }
 
-  focusLinkElement(selector: string): void {
+  focusElement(selector: string): void {
     let errorListElement: HTMLElement = null;
     let linkElement: HTMLLinkElement = null;
 
@@ -302,9 +303,21 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
       this.utforandeVerksamheterFormControl.value
     );
 
+    if (hasSelectedAllLeafNodes === this.selectAllUtforandeVerksamheterFormControl.value) {
+      return;
+    }
+
     this.editEmployeeFormGroup.patchValue(
       Object.fromEntries([[this.selectAllUtforandeVerksamheterFormControlName, hasSelectedAllLeafNodes]])
     );
+
+    if (!hasSelectedAllLeafNodes) {
+      return;
+    }
+
+    setTimeout(() => {
+      this.focusElement(`#${this.selectAllUtforandeVerksamheterElementId}`);
+    });
   }
 
   emitCloseError(): void {

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Avrop, AvropCompact, AvropCompactData } from '@msfa-models/avrop.model';
+import { AvropCompact, AvropCompactData } from '@msfa-models/avrop.model';
 import { Handledare } from '@msfa-models/handledare.model';
 import { AvropService } from '@msfa-services/avrop.service';
 import { Observable } from 'rxjs';

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts

@@ -69,10 +69,18 @@ export class DeltagareCardComponent {
 
     switch (reportType) {
       case 'planering':
-        this.reportsFormControl.valid ? void this.router.navigate(['/deltagare/planering', deltagareId]) : null;
+        if (this.reportsFormControl.valid) {
+          this.router.navigate(['/deltagare/planering', deltagareId]).catch(error => {
+            console.error(error);
+          });
+        }
         break;
       case 'avvikelse':
-        this.reportsFormControl.valid ? void this.router.navigate(['/deltagare/rapportera', deltagareId]) : null;
+        if (this.reportsFormControl.valid) {
+          this.router.navigate(['/deltagare/rapportera', deltagareId]).catch(error => {
+            console.error(error);
+          });
+        }
         break;
       default:
         return;

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

@@ -29,7 +29,7 @@
           (afOnKeyup)="onFilterTextChanged($event, treeNodeModel)"
         ></digi-form-input-search>
         <div class="msfa__a11y-sr-only" [attr.id]="'filter-description-'+treeNodeModel.uuid">
-          Filtrera valbara alternativ där deras namn måste innehålla den angivna texten.
+          Filtrera valbara alternativ i listan nedan genom att ange en text som återfinns i deras namn.
         </div>
       </div>
       <digi-form-checkbox
@@ -76,7 +76,7 @@
         'expanded-tree-node__child-node-expansion-btn--active' : isExpanded
       }"
       [attr.aria-expanded]="isExpanded"
-      [attr.aria-label]="getAriaLabelTextForExpansionButton(parentNode, node)"
+      [attr.aria-label]="node | ariaLabelTextForExpansionBtn: parentNode: parentNode?.expandedChildUuid"
       [attr.aria-controls]="'expansion-panel-'+node.uuid"
       (click)="onSetExpandedChild(parentNode, node)"
     >

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

@@ -133,15 +133,6 @@
     &--toggle-all {
       margin: 1.25rem $digi--layout--gutter;
     }
-
-    ::ng-deep {
-      .digi-form-checkbox__label {
-        display: block;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
   }
 
   &__child-node-expansion-panel {

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

@@ -160,10 +160,6 @@ export class ExpandedTreeNodeComponent extends UnsubscribeDirective implements O
     return this.treeNodesSelectorService.hasSelectedLeafNodeDescendant(treeNode);
   }
 
-  getAriaLabelTextForExpansionButton(parentTreeNode: TreeNodeModel, treeNode: TreeNodeModel): string {
-    return this.treeNodesSelectorService.getAriaLabelTextForExpansionButton(parentTreeNode, treeNode);
-  }
-
   getAriaLabelForToggleAllButton(treeNode: TreeNodeModel): string {
     return this.treeNodesSelectorService.getAriaLabelForToggleAllButton(treeNode);
   }

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

@@ -1,5 +1,5 @@
 <digi-util-detect-focus-outside (afOnFocusOutside)="closePanel()">
-  <digi-util-keydown-handler (afOnEsc)="closePanel()">
+  <digi-util-keydown-handler (afOnEsc)="closePanelAndFocusControlToggleBtn()">
     <section class="tree-nodes-selector-panel">
       <header>
         <h2 class="tree-nodes-selector-panel__heading">{{headingText}}</h2>
@@ -20,6 +20,7 @@
       <div class="tree-nodes-selector-panel__content" *ngIf="pendingRootNode">
         <div class="tree-nodes-selector-panel__tree">
           <msfa-expanded-tree-node
+            [headingText]="pendingRootNode.label"
             [treeNodeModel]="pendingRootNode"
             [visibleChildren]="visibleChildren"
             (selectedNodesChanged)="updateExpandedChildPanel($event)"
@@ -32,7 +33,7 @@
           [attr.af-aria-label]="'Bekräftar dina val och stänger kontrollen'"
           [attr.af-type]="'button'"
           [attr.af-size]="ButtonSize.S"
-          (afOnClick)="closePanel()"
+          (afOnClick)="closePanelAndFocusControlToggleBtn()"
         >
           {{confirmationButtonText}}
         </digi-button>

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

@@ -7,7 +7,7 @@
 .tree-nodes-selector-panel {
   position: relative;
   background-color: var(--digi--ui--color--background);
-  min-width: rem(710);
+  min-width: rem(760);
   box-shadow: $msfa__shadow;
   border-radius: var(--digi--ui--border--radius);
 

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts

@@ -18,6 +18,7 @@ export class TreeNodesSelectorPanelComponent implements OnInit {
   @Input() confirmationButtonText = 'Spara';
   @Output() selectedChangesConfirmed = new EventEmitter<TreeNodeModel>();
   @Output() closePanelRequested = new EventEmitter<void>();
+  @Output() focusControlToggleBtnRequested = new EventEmitter<void>();
 
   readonly ButtonSize = ButtonSize;
 
@@ -51,6 +52,11 @@ export class TreeNodesSelectorPanelComponent implements OnInit {
     this.closePanelRequested.emit();
   }
 
+  closePanelAndFocusControlToggleBtn(): void {
+    this.closePanel();
+    this.focusControlToggleBtnRequested.emit();
+  }
+
   hasSelectedDescendant(treeNode: TreeNodeModel): boolean {
     return this.treeNodesSelectorService.hasSelectedLeafNodeDescendant(treeNode);
   }

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

@@ -1,11 +1,12 @@
 <div class="tree-nodes-selector">
-  <div class="msfa__backdrop" *ngIf="displayPanel" (click)="closePanel()"></div>
+  <div class="msfa__backdrop" *ngIf="displayPanel" (click)="onClickOutsidePanel()"></div>
   <div class="tree-nodes-selector__panel-wrapper">
     <button
       #togglePanelBtn
       (click)="togglePanel()"
       [attr.id]="buttonElementId"
       [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="displayPanel"
       [ngClass]="{'tree-nodes-selector__toggle-panel-btn--invalid': isInvalid && showValidation}"
       type="button"
       class="tree-nodes-selector__toggle-panel-btn"
@@ -28,6 +29,7 @@
         [confirmationButtonText]="confirmationButtonText"
         (selectedChangesConfirmed)="updateTreeNodeSelectorWithSelectedChanges($event)"
         (closePanelRequested)="closePanel()"
+        (focusControlToggleBtnRequested)="focusControlToggleBtn()"
       >
       </msfa-tree-nodes-selector-panel>
     </div>

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts

@@ -13,6 +13,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { uuid } from '@msfa-utils/uuid';
 import { TreeNode, TreeNodeModel, TreeNodesSelectorService } from '../../services/tree-nodes-selector.service';
+import { TreeNodesSelectorPanelComponent } from '../tree-nodes-selector-panel/tree-nodes-selector-panel.component';
 
 interface PropagateChangeFn {
   (_: unknown): void;
@@ -45,6 +46,8 @@ export class TreeNodesSelectorComponent implements ControlValueAccessor {
   @Output() selectedTreeNodesChanged = new EventEmitter<void>();
 
   @ViewChild('togglePanelBtn') togglePanelBtn: ElementRef;
+  @ViewChild(TreeNodesSelectorPanelComponent)
+  private treeNodesSelectorPanel: TreeNodesSelectorPanelComponent;
 
   rootNode: TreeNodeModel | null = null;
   displayPanel = false;
@@ -91,7 +94,22 @@ export class TreeNodesSelectorComponent implements ControlValueAccessor {
     this.displayPanel = false;
   }
 
+  onClickOutsidePanel(): void {
+    if (!this.treeNodesSelectorPanel) {
+      this.closePanel();
+      return;
+    }
+
+    this.treeNodesSelectorPanel.closePanel();
+  }
+
   togglePanel(): void {
     this.displayPanel = !this.displayPanel;
   }
+
+  focusControlToggleBtn(): void {
+    const togglePanelBtnElement = this.togglePanelBtn.nativeElement as HTMLElement;
+
+    togglePanelBtnElement.focus();
+  }
 }

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts

@@ -0,0 +1,9 @@
+import { TreeNodesSelectorService } from '../services/tree-nodes-selector.service';
+import { AriaLabelTextForExpansionBtnPipe } from './aria-label-text-for-expansion-btn.pipe';
+
+describe('AriaLabelTextForExpansionBtnPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AriaLabelTextForExpansionBtnPipe(new TreeNodesSelectorService());
+    expect(pipe).toBeTruthy();
+  });
+});

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TreeNodeModel, TreeNodesSelectorService } from '../services/tree-nodes-selector.service';
+
+@Pipe({
+  name: 'ariaLabelTextForExpansionBtn',
+})
+export class AriaLabelTextForExpansionBtnPipe implements PipeTransform {
+  constructor(private treeNodesSelectorService: TreeNodesSelectorService) {}
+
+  transform(treeNode: TreeNodeModel, parentTreeNode: TreeNodeModel, expandedChildUuid: string): string {
+    return this.treeNodesSelectorService.getAriaLabelTextForExpansionButton(
+      parentTreeNode,
+      treeNode,
+      expandedChildUuid
+    );
+  }
+}

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts

@@ -77,10 +77,19 @@ export class TreeNodesSelectorService {
     );
   }
 
-  getAriaLabelTextForExpansionButton(parentTreeNode: TreeNodeModel, treeNode: TreeNodeModel): string {
+  /*
-    const isActiveNode = parentTreeNode && treeNode ? parentTreeNode.expandedChildUuid === treeNode.uuid : false;
+    Taking expandedChildUuid as a seperate param despite being a property of the parent tree node
+    because there is no change detection for properties within objects.*/
+  getAriaLabelTextForExpansionButton(
+    parentTreeNode: TreeNodeModel,
+    treeNode: TreeNodeModel,
+    expandedChildUuid: string
+  ): string {
+    const isActiveNode = parentTreeNode && treeNode ? expandedChildUuid === treeNode.uuid : false;
 
-    return `${isActiveNode ? 'Döljer' : 'Visar'} ${treeNode.grandChildrenItemType} för ${treeNode.label}`;
+    return `${isActiveNode ? 'Döljer' : 'Visar'} ${
+      parentTreeNode.grandChildrenItemType ? this.getCleanedText(parentTreeNode.grandChildrenItemType) : 'innehåll'
+    } för ${treeNode.label}`;
   }
 
   hasChildLeafNodes(node: TreeNode): boolean {

apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts

@@ -4,9 +4,10 @@ import { TreeNodesSelectorPanelComponent } from './components/tree-nodes-selecto
 import { TreeNodesSelectorComponent } from './components/tree-nodes-selector/tree-nodes-selector.component';
 import { ExpandedTreeNodeComponent } from './components/expanded-tree-node/expanded-tree-node.component';
 import { DigiNgTypographyDynamicHeadingModule } from '@af/digi-ng/_typography/typography-dynamic-heading';
+import { AriaLabelTextForExpansionBtnPipe } from './pipes/aria-label-text-for-expansion-btn.pipe';
 
 @NgModule({
-  declarations: [TreeNodesSelectorComponent, TreeNodesSelectorPanelComponent, ExpandedTreeNodeComponent],
+  declarations: [TreeNodesSelectorComponent, TreeNodesSelectorPanelComponent, ExpandedTreeNodeComponent, AriaLabelTextForExpansionBtnPipe],
   imports: [CommonModule, DigiNgTypographyDynamicHeadingModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   exports: [TreeNodesSelectorComponent],