feature(Teknisk skuld): Refaktorisera overlay och multiselect (används i filtren i Avrop). Förberedande arbete inför att göra egna komponenter för dialog och popover (TV-845)

Merge in TEA/mina-sidor-fa-web from feature/TV-845-move-overlays-(dialog,-popover)-to-@ui to develop

Squashed commit of the following:

commit b98faf62aa47a155acb5609cdbdbc31a2c726ee9
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Nov 30 09:13:48 2021 +0100

    Update overlay-trigger-for.directive.ts

commit 3945b98f702e82e100cb223da8da0be02fd48d17
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Nov 29 11:45:33 2021 +0100

    Update avrop.service.ts

commit 4c65724cac9825a599feb003c725ac37a40d03fa
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Nov 29 11:40:08 2021 +0100

    cleanup

commit aad6c2fc64e7d8c4d19da5f3c061f92a953be59e
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Nov 29 11:06:21 2021 +0100

    refactor overlay and multiselect

commit cf57126f36416f6e9de60d0048e2494bc4141188
Merge: 94257008 609698eb
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Nov 29 08:41:55 2021 +0100

    Merge branch 'develop' into feature/TV-845-move-overlays-(dialog,-popover)-to-@ui

commit 942570081f4bad6e6dc68f5416619cd64d9d6bb4
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Nov 24 15:44:56 2021 +0100

    migrate Dropdown to UI and extract Overlay part for other usage

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html

@@ -1,34 +1,34 @@
 <div class="avrop-filters" *ngIf="(filtersAreLoading$ | async) === false; else loadingRef">
   <div class="avrop-filters__filter-wrapper" *ngIf="availableTjanster$ | async as availableTjanster">
-    <msfa-multiselect
+    <ui-multiselect
       [multiselectTitle]="'Tjänster'"
       [availableOptions]="availableTjanster"
       confirmButtonText="Uppdatera filter"
       [selectedOptions]="filteredTjanster$ | async"
       (selectedOptionsChange)="updateSelectedTjanster($event)"
-    ></msfa-multiselect>
+    ></ui-multiselect>
   </div>
   <div
     class="avrop-filters__filter-wrapper"
     *ngIf="availableUtforandeVerksamheter$ | async as availableUtforandeVerksamheter"
   >
-    <msfa-multiselect
+    <ui-multiselect
       [multiselectTitle]="'Utförande verksamheter'"
       confirmButtonText="Uppdatera filter"
       [availableOptions]="availableUtforandeVerksamheter"
       [selectedOptions]="filteredUtforandeVerksamheter$ | async"
       (selectedOptionsChange)="updateSelectedUtforandeVerksamheter($event)"
-    ></msfa-multiselect>
+    ></ui-multiselect>
   </div>
 
   <div class="avrop-filters__filter-wrapper" *ngIf="availableKommuner$ | async as availableKommuner">
-    <msfa-multiselect
+    <ui-multiselect
       [multiselectTitle]="'Kommuner'"
       [availableOptions]="availableKommuner"
       [selectedOptions]="filteredKommuner$ | async"
       confirmButtonText="Uppdatera filter"
       (selectedOptionsChange)="updateSelectedKommuner($event)"
-    ></msfa-multiselect>
+    ></ui-multiselect>
   </div>
 </div>
 <br /><br />

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

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AvropService } from '@msfa-services/avrop.service';
-import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { MultiselectFilterOption } from '@ui/multiselect/multiselect-filter-option';
 
 @Component({
   selector: 'msfa-avrop-filters',

apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MultiselectModule } from '@msfa-shared/components/multiselect/multiselect.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { AvropFiltersComponent } from './avrop-filters.component';
+import { UiMultiselectModule } from '@ui/multiselect/multiselect.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [AvropFiltersComponent],
-  imports: [CommonModule, MultiselectModule, UiLoaderModule],
+  imports: [CommonModule, UiMultiselectModule, UiLoaderModule],
   exports: [AvropFiltersComponent],
 })
 export class AvropFiltersModule {}

apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DropdownTriggerForDirective } from './dropdown-trigger-for.directive';
-import { DropdownComponent } from './dropdown.component';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { A11yModule } from '@angular/cdk/a11y';
-
-@NgModule({
-  declarations: [DropdownTriggerForDirective, DropdownComponent],
-  imports: [CommonModule, OverlayModule, A11yModule],
-  exports: [DropdownTriggerForDirective, DropdownComponent],
-})
-export class DropdownModule {}

apps/mina-sidor-fa/src/app/shared/models/api/params.model.ts

@@ -1,7 +1,7 @@
 import { SortOrder } from '@msfa-enums/sort-order.enum';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
-import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { EmployeeCompactResponse } from './employee.response.model';
+import { MultiselectFilterOption } from '@ui/multiselect/multiselect-filter-option';
 
 export interface Params {
   [param: string]: string | string[];

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

@@ -3,10 +3,10 @@ import { AvropParams, Params } from '@msfa-models/api/params.model';
 import { Avrop, AvropAndMeta } from '@msfa-models/avrop.model';
 import { Handledare } from '@msfa-models/handledare.model';
 import { AvropApiService } from '@msfa-services/api/avrop-api.service';
-import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
 import { distinctUntilChanged, filter, map, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { HandledareApiService } from './api/handledare.api.service';
+import { MultiselectFilterOption } from '@ui/multiselect/multiselect-filter-option';
 
 type Step = 1 | 2 | 3 | 4;
 

libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.scss

@@ -1,6 +1,6 @@
-@import 'mixins/form';
+@import 'libs/styles/src/mixins/form';
 
-@import 'mixins/a11y';
+@import 'libs/styles/src/mixins/a11y';
 .multiselect-panel {
   &__checkboxes {
     max-width: var(--digi--typography--text--max-width);

libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.ts

@@ -7,18 +7,18 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import { DropdownTriggerForDirective } from '@msfa-shared/components/dropdown/dropdown-trigger-for.directive';
+import { MultiselectFilterOption } from '@ui/multiselect/multiselect-filter-option';
-import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { BehaviorSubject } from 'rxjs';
+import { OverlayTriggerForDirective } from '@ui/overlay/overlay-trigger-for.directive';
 
 @Component({
-  selector: 'msfa-multiselect-panel',
+  selector: 'ui-multiselect-panel',
   templateUrl: './multiselect-panel.component.html',
   styleUrls: ['./multiselect-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MultiselectPanelComponent implements OnChanges {
-  @Input() dropdownRef: DropdownTriggerForDirective;
+  @Input() overlayRef: OverlayTriggerForDirective;
   @Input() confirmButtonText = 'Spara';
   @Input() multiselectTitle: string;
   @Input() multiselectTitlePlural: string;

libs/ui/src/multiselect/multiselect.component.html

@@ -1,6 +1,7 @@
 <button
   #multiselectButton
-  [msfaDropdownTriggerFor]="dropdown"
+  [uiOverlayTriggerFor]="overlay"
+  [uiOverlayPositions]="overlayPositions"
   [attr.id]="buttonElementId"
   [attr.aria-controls]="panelId"
   [ngClass]="{'multiselect__toggle-btn--invalid': isInvalid && showValidation}"
@@ -12,16 +13,18 @@
   <span class="msfa__a11y-sr-only"> Filtrera på {{multiselectTitle}}. </span>
 </button>
 
-<msfa-dropdown #dropdown [attr.id]="panelId">
+<ui-overlay #overlay>
-  <msfa-multiselect-panel
+  <div class="multiselect__overlay-content" [attr.id]="panelId" cdkTrapFocus cdkTrapFocusAutoCapture>
+    <ui-multiselect-panel
       [availableOptions]="availableOptions"
       [selectedOptions]="selectedOptions"
-    [dropdownRef]="dropdown"
+      [overlayRef]="overlay"
       [multiselectTitle]="multiselectTitle"
       [confirmButtonText]="confirmButtonText"
       (selectedOptionsChange)="emitSelectedOptions($event)"
-  ></msfa-multiselect-panel>
+    ></ui-multiselect-panel>
-</msfa-dropdown>
+  </div>
+</ui-overlay>
 
 <div class="msfa__a11y-sr-only" aria-live="polite">
   <span *ngIf="selectedOptions"

libs/ui/src/multiselect/multiselect.component.scss

@@ -1,8 +1,15 @@
-@import 'variables/colors';
+@import 'libs/styles/src/variables/colors';
-@import 'mixins/list';
+@import 'libs/styles/src/mixins/list';
-@import 'variables/gutters';
+@import 'libs/styles/src/variables/gutters';
+@import 'libs/styles/src/variables/shadows';
 
 .multiselect {
+  &__overlay__content {
+    background-color: white;
+    border-radius: var(--digi--ui--border--radius);
+    box-shadow: $msfa__shadow;
+  }
+
   &__toggle-btn {
     margin-right: var(--digi--layout--gutter);
     display: flex;

libs/ui/src/multiselect/multiselect.component.spec.ts

@@ -1,7 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MultiselectComponent } from './multiselect.component';
-import { DropdownModule } from '@msfa-shared/components/dropdown/dropdown.module';
+import { DropdownModule } from '@ui/dropdown/dropdown.module';
 
 describe('MultiselectComponent', () => {
   let component: MultiselectComponent;

libs/ui/src/multiselect/multiselect.component.ts

@@ -11,9 +11,10 @@ import {
   ViewChild,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DropdownTriggerForDirective } from '@msfa-shared/components/dropdown/dropdown-trigger-for.directive';
+import { MultiselectFilterOption } from '@ui/multiselect/multiselect-filter-option';
-import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
 import { uuid } from '@utils/uuid.util';
+import { OverlayTriggerForDirective } from '@ui/overlay/overlay-trigger-for.directive';
+import { ConnectedPosition } from '@angular/cdk/overlay';
 
 interface PropagateChangeFn {
   (_: unknown): void;
@@ -24,7 +25,7 @@ interface PropagateTouchedFn {
 }
 
 @Component({
-  selector: 'msfa-multiselect',
+  selector: 'ui-multiselect',
   templateUrl: './multiselect.component.html',
   styleUrls: ['./multiselect.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -37,7 +38,7 @@ interface PropagateTouchedFn {
   ],
 })
 export class MultiselectComponent implements AfterViewInit, ControlValueAccessor {
-  @ViewChild(DropdownTriggerForDirective) dropdownRef: DropdownTriggerForDirective;
+  @ViewChild(OverlayTriggerForDirective) dropdownRef: OverlayTriggerForDirective;
   panelId = `panel-${uuid()}`;
   @Input() buttonElementId: string = uuid();
   @Input() isInvalid = false;
@@ -49,6 +50,16 @@ export class MultiselectComponent implements AfterViewInit, ControlValueAccessor
   @Input() selectedOptions: MultiselectFilterOption[];
   @Output() selectedOptionsChange = new EventEmitter<MultiselectFilterOption[]>();
   @ViewChild('multiselectButton') multiselectButton: ElementRef;
+
+  overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: 3,
+    },
+  ];
   isDisabled = false;
 
   private propagateChange: PropagateChangeFn;

libs/ui/src/multiselect/multiselect.module.ts

@@ -3,14 +3,14 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { DropdownModule } from '@msfa-shared/components/dropdown/dropdown.module';
+import { MultiselectComponent } from '@ui/multiselect/multiselect.component';
-import { MultiselectComponent } from '@msfa-shared/components/multiselect/multiselect.component';
 import { MultiselectPanelComponent } from './multiselect-panel/multiselect-panel.component';
+import { UiOverlayModule } from '@ui/overlay/overlay.module';
 
 @NgModule({
   declarations: [MultiselectComponent, MultiselectPanelComponent],
-  imports: [CommonModule, DropdownModule, A11yModule, DigiNgFormCheckboxModule, FormsModule],
+  imports: [CommonModule, A11yModule, DigiNgFormCheckboxModule, FormsModule, UiOverlayModule],
   exports: [MultiselectComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class MultiselectModule {}
+export class UiMultiselectModule {}

libs/ui/src/overlay/overlay-trigger-for.directive.ts

@@ -1,18 +1,26 @@
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Directive, ElementRef, HostListener, Input, OnDestroy, ViewContainerRef } from '@angular/core';
 import { merge, Observable, Subscription } from 'rxjs';
-import { DropdownPanel } from './dropdown-panel';
+import { OverlayPanel } from './overlay.model';
 
 @Directive({
-  selector: '[msfaDropdownTriggerFor]',
+  selector: '[uiOverlayTriggerFor]',
 })
-export class DropdownTriggerForDirective implements OnDestroy {
+export class OverlayTriggerForDirective implements OnDestroy {
-  @Input('msfaDropdownTriggerFor') public dropdownPanel: DropdownPanel;
+  @Input() public uiOverlayTriggerFor: OverlayPanel;
-
+  @Input() public uiOverlayPositions: ConnectedPosition[] = [
-  private isDropdownOpen = false;
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: 3,
+    },
+  ];
+  private isOverlayOpen = false;
   public overlayRef: OverlayRef;
-  private dropdownClosingActionsSub = Subscription.EMPTY;
+  private overlayClosingActionsSub = Subscription.EMPTY;
 
   private onClosedCallback: () => void = () => {
     return;
@@ -35,11 +43,11 @@ export class DropdownTriggerForDirective implements OnDestroy {
   ) {}
 
   toggleDropdown(): void {
-    this.isDropdownOpen ? this.closeDropdown() : this.openDropdown();
+    this.isOverlayOpen ? this.closeDropdown() : this.openOverlay();
   }
 
-  openDropdown(): void {
+  openOverlay(): void {
-    this.isDropdownOpen = true;
+    this.isOverlayOpen = true;
     this.overlayRef = this.overlay.create({
       hasBackdrop: true,
       backdropClass: 'cdk-overlay-transparent-backdrop',
@@ -47,41 +55,33 @@ export class DropdownTriggerForDirective implements OnDestroy {
       positionStrategy: this.overlay
         .position()
         .flexibleConnectedTo(this.elementRef)
-        .withPositions([
+        .withPositions(this.uiOverlayPositions),
-          {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetY: 3,
-          },
-        ]),
     });
 
-    const templatePortal = new TemplatePortal(this.dropdownPanel.templateRef, this.viewContainerRef);
+    const templatePortal = new TemplatePortal(this.uiOverlayTriggerFor.templateRef, this.viewContainerRef);
 
     this.overlayRef.attach(templatePortal);
     this.onOpenCallback();
 
-    this.dropdownClosingActionsSub = this.dropdownClosingActions().subscribe(() => this.closeDropdown());
+    this.overlayClosingActionsSub = this.dropdownClosingActions().subscribe(() => this.closeDropdown());
   }
 
   private dropdownClosingActions(): Observable<MouseEvent | void> {
     const backdropClick$ = this.overlayRef.backdropClick();
     const detachment$ = this.overlayRef.detachments();
-    const dropdownClosed = this.dropdownPanel.closed;
+    const overlayClosed = this.uiOverlayTriggerFor.closed;
 
-    return merge(backdropClick$, detachment$, dropdownClosed);
+    return merge(backdropClick$, detachment$, overlayClosed);
   }
 
   closeDropdown(): void {
-    if (!this.overlayRef || !this.isDropdownOpen) {
+    if (!this.overlayRef || !this.isOverlayOpen) {
       return;
     }
 
     this.onClosedCallback();
-    this.dropdownClosingActionsSub.unsubscribe();
+    this.overlayClosingActionsSub.unsubscribe();
-    this.isDropdownOpen = false;
+    this.isOverlayOpen = false;
     this.overlayRef.detach();
   }
 

libs/ui/src/overlay/overlay.component.html

@@ -1,5 +1,5 @@
 <ng-template>
-  <div class="dropdown-content" cdkTrapFocus cdkTrapFocusAutoCapture>
+  <div class="overlay__content" cdkTrapFocus cdkTrapFocusAutoCapture>
     <ng-content></ng-content>
   </div>
 </ng-template>

libs/ui/src/overlay/overlay.component.scss

@@ -1,6 +1,6 @@
-@import "variables/shadows";
+@import 'libs/styles/src/variables/shadows';
 
-.dropdown-content {
+.overlay__content {
   background-color: white;
   border-radius: var(--digi--ui--border--radius);
   box-shadow: $msfa__shadow;

libs/ui/src/overlay/overlay.component.spec.ts

@@ -1,20 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DropdownComponent } from './dropdown.component';
+import { OverlayComponent } from './overlay.component';
 
 describe('DropdownComponent', () => {
-  let component: DropdownComponent;
+  let component: OverlayComponent;
-  let fixture: ComponentFixture<DropdownComponent>;
+  let fixture: ComponentFixture<OverlayComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DropdownComponent ]
+      declarations: [OverlayComponent],
-    })
+    }).compileComponents();
-    .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DropdownComponent);
+    fixture = TestBed.createComponent(OverlayComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

libs/ui/src/overlay/overlay.component.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Output, TemplateRef, ViewChild } from '@angular/core';
-import { DropdownPanel } from './dropdown-panel';
+import { OverlayPanel } from './overlay.model';
 
 @Component({
-  selector: 'msfa-dropdown',
+  selector: 'ui-overlay',
-  templateUrl: './dropdown.component.html',
+  templateUrl: './overlay.component.html',
-  styleUrls: ['./dropdown.component.scss'],
+  styleUrls: ['./overlay.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DropdownComponent implements DropdownPanel {
+export class OverlayComponent implements OverlayPanel {
   @ViewChild(TemplateRef) templateRef: TemplateRef<never>;
   @Output() closed = new EventEmitter<void>();
 }

libs/ui/src/overlay/overlay.model.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, TemplateRef } from '@angular/core';
 
-export interface DropdownPanel {
+export interface OverlayPanel {
   templateRef: TemplateRef<never>;
   readonly closed: EventEmitter<void>;
 }

libs/ui/src/overlay/overlay.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OverlayTriggerForDirective } from '../overlay/overlay-trigger-for.directive';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { A11yModule } from '@angular/cdk/a11y';
+import { OverlayComponent } from '@ui/overlay/overlay.component';
+
+@NgModule({
+  declarations: [OverlayTriggerForDirective, OverlayComponent],
+  imports: [CommonModule, OverlayModule, A11yModule],
+  exports: [OverlayTriggerForDirective, OverlayComponent],
+})
+export class UiOverlayModule {}