diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html index 271e76e..0e3a720 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html +++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html @@ -1,34 +1,34 @@
- + >
- + >
- + >


diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts index 7b5bb74..e7d3285 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts +++ b/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', diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts index 6971d5d..026231c 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts +++ b/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 {} diff --git a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.module.ts b/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.module.ts deleted file mode 100644 index ecd2958..0000000 --- a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.module.ts +++ /dev/null @@ -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 {} diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/params.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/params.model.ts index ae9eafa..8eb2eae 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/api/params.model.ts +++ b/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[]; diff --git a/apps/mina-sidor-fa/src/app/shared/services/avrop.service.ts b/apps/mina-sidor-fa/src/app/shared/services/avrop.service.ts index f96b29c..16ea609 100644 --- a/apps/mina-sidor-fa/src/app/shared/services/avrop.service.ts +++ b/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; diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-filter-option.ts b/libs/ui/src/multiselect/multiselect-filter-option.ts similarity index 100% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-filter-option.ts rename to libs/ui/src/multiselect/multiselect-filter-option.ts diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.html b/libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.html similarity index 100% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.html rename to libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.html diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.scss b/libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.scss similarity index 96% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.scss rename to libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.scss index 3aba42c..52d9854 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.scss +++ b/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); diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.spec.ts b/libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.spec.ts similarity index 100% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.spec.ts rename to libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.spec.ts diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.ts b/libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.ts similarity index 88% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.ts rename to libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.ts index 839626f..d702cb8 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.ts +++ b/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 '@msfa-shared/components/multiselect/multiselect-filter-option'; +import { MultiselectFilterOption } from '@ui/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; diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.html b/libs/ui/src/multiselect/multiselect.component.html similarity index 60% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.html rename to libs/ui/src/multiselect/multiselect.component.html index 65f0310..3382b69 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.html +++ b/libs/ui/src/multiselect/multiselect.component.html @@ -1,6 +1,7 @@ - - - + +
+ +
+
{ let component: MultiselectComponent; diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.ts b/libs/ui/src/multiselect/multiselect.component.ts similarity index 85% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.ts rename to libs/ui/src/multiselect/multiselect.component.ts index 81c1a97..037e8c5 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.ts +++ b/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 '@msfa-shared/components/multiselect/multiselect-filter-option'; +import { MultiselectFilterOption } from '@ui/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(); @ViewChild('multiselectButton') multiselectButton: ElementRef; + + overlayPositions: ConnectedPosition[] = [ + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + offsetY: 3, + }, + ]; isDisabled = false; private propagateChange: PropagateChangeFn; diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.module.ts b/libs/ui/src/multiselect/multiselect.module.ts similarity index 63% rename from apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.module.ts rename to libs/ui/src/multiselect/multiselect.module.ts index df03ea5..7848130 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.module.ts +++ b/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 '@msfa-shared/components/multiselect/multiselect.component'; +import { MultiselectComponent } from '@ui/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 {} diff --git a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown-trigger-for.directive.ts b/libs/ui/src/overlay/overlay-trigger-for.directive.ts similarity index 58% rename from apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown-trigger-for.directive.ts rename to libs/ui/src/overlay/overlay-trigger-for.directive.ts index 69edae3..de0b79d 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown-trigger-for.directive.ts +++ b/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 { - @Input('msfaDropdownTriggerFor') public dropdownPanel: DropdownPanel; - - private isDropdownOpen = false; +export class OverlayTriggerForDirective implements OnDestroy { + @Input() public uiOverlayTriggerFor: OverlayPanel; + @Input() public uiOverlayPositions: ConnectedPosition[] = [ + { + 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 { - this.isDropdownOpen = true; + openOverlay(): void { + 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([ - { - originX: 'start', - originY: 'bottom', - overlayX: 'start', - overlayY: 'top', - offsetY: 3, - }, - ]), + .withPositions(this.uiOverlayPositions), }); - 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 { 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.isDropdownOpen = false; + this.overlayClosingActionsSub.unsubscribe(); + this.isOverlayOpen = false; this.overlayRef.detach(); } diff --git a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.html b/libs/ui/src/overlay/overlay.component.html similarity index 53% rename from apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.html rename to libs/ui/src/overlay/overlay.component.html index 4c65e10..812b453 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.html +++ b/libs/ui/src/overlay/overlay.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.scss b/libs/ui/src/overlay/overlay.component.scss similarity index 62% rename from apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.scss rename to libs/ui/src/overlay/overlay.component.scss index c0e699d..77bc937 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.scss +++ b/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; diff --git a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.spec.ts b/libs/ui/src/overlay/overlay.component.spec.ts similarity index 56% rename from apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.spec.ts rename to libs/ui/src/overlay/overlay.component.spec.ts index 8fde5e0..8e4ad7c 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.spec.ts +++ b/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 fixture: ComponentFixture; + let component: OverlayComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DropdownComponent ] - }) - .compileComponents(); + declarations: [OverlayComponent], + }).compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(DropdownComponent); + fixture = TestBed.createComponent(OverlayComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.ts b/libs/ui/src/overlay/overlay.component.ts similarity index 56% rename from apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.ts rename to libs/ui/src/overlay/overlay.component.ts index 562e4e4..935c032 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown.component.ts +++ b/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', - templateUrl: './dropdown.component.html', - styleUrls: ['./dropdown.component.scss'], + selector: 'ui-overlay', + templateUrl: './overlay.component.html', + styleUrls: ['./overlay.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DropdownComponent implements DropdownPanel { +export class OverlayComponent implements OverlayPanel { @ViewChild(TemplateRef) templateRef: TemplateRef; @Output() closed = new EventEmitter(); } diff --git a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown-panel.ts b/libs/ui/src/overlay/overlay.model.ts similarity index 80% rename from apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown-panel.ts rename to libs/ui/src/overlay/overlay.model.ts index dcbfbb5..f4e471b 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/dropdown/dropdown-panel.ts +++ b/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; readonly closed: EventEmitter; } diff --git a/libs/ui/src/overlay/overlay.module.ts b/libs/ui/src/overlay/overlay.module.ts new file mode 100644 index 0000000..a71ddd2 --- /dev/null +++ b/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 {}