feature(digi-migrering): ui popover flyttat till vår kod. Påverkar info-rutorna på deltagareflikarna (TV-852)

Merge in TEA/mina-sidor-fa-web from feature/TV-852-ui-popover-with-angular-cdk to develop

Squashed commit of the following:

commit 2fc389330b473e53916c1505c15d129c97239e7a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 3 13:32:52 2021 +0100

    Update ui-popover.component.scss

commit d88c5e8cbb2d517f6463ed2ca22a4dfe4c21e696
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 3 13:31:41 2021 +0100

    refactoir

commit 400eae3e2732252dae1be8576f9231418007c9e7
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 3 13:30:09 2021 +0100

    refactor

commit d9c76abd40edd8071324f6c51dab2ecdc5759883
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 3 13:27:12 2021 +0100

    inline button

commit 0acabc39c42556936300b862c976328479084752
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 3 09:47:32 2021 +0100

    wip

commit b7c51ba386c1b3dd771bdebe1d5a4219c0702dc6
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 3 08:14:48 2021 +0100

    Update ui-popover.component.ts

commit 9e63b116b694c94daa4cb3b9a3dd898891d00c2b
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 3 07:49:21 2021 +0100

    first version
This commit is contained in:
Daniel Appelgren
2021-12-03 14:42:47 +01:00
parent 57113f45f3
commit ec63435fc5
15 changed files with 299 additions and 44 deletions

View File

@@ -40,19 +40,19 @@
<dt>Behov av tolk:</dt>
<dd class="deltagare-tab-personal-information__info">
{{avropInformation.tolkbehov || 'Inget tolkbehov'}}
<digi-ng-popover class="deltagare-tab-personal-information__popover" [afRelativeIconSize]="true">
<ui-popover>
<p>
Tolk är en typ av språkstöd som kan behöva anlitas vid behov. Ibland står Arbetsförmedlingen för
tolkkostnaden och ibland står leverantören för tolkkostnaden. Det finns skillnader mellan vilket språkstöd
som ingår i upphandlingen av olika tjänster och utbildningar. Du hittar mer information om språkstöd och
tolk i förfrågningsunderlaget för specifik upphandling.
</p>
</digi-ng-popover>
</ui-popover>
</dd>
<dt>Behov av språkstöd:</dt>
<dd class="deltagare-tab-personal-information__info">
{{avropInformation.sprakstod || 'Inget språkstöd'}}
<digi-ng-popover class="deltagare-tab-personal-information__popover" [afRelativeIconSize]="true">
<ui-popover>
<p>
Det finns flera olika typer av språkstöd. Till exempel användande av flerspråkig personal, tillgång till
material på lätt svenska eller olika språk, anlitande av tolk med mera. Dessa kan erbjudas och kombineras
@@ -60,7 +60,7 @@
tjänster och utbildningar. Du hittar mer information om språkstöd i förfrågningsunderlaget för specifik
upphandling.
</p>
</digi-ng-popover>
</ui-popover>
</dd>
</ng-container>
</dl>
@@ -108,12 +108,12 @@
class="deltagare-tab-personal-information__info"
>
{{ avropInformation.genomforandeReferens }}
<digi-ng-popover class="deltagare-tab-personal-information__popover" [afRelativeIconSize]="true">
<ui-popover [uiPopoverPosition]="UiPopoverPosition.Bottom">
<p>
Genomförandereferens är det referensnummer du ska använda dig av i kontakten med Arbetsförmedlingen. Du
kan också använda genomförandereferensen till att leta fram en order i leverantörsportalen.
</p>
</digi-ng-popover>
</ui-popover>
</dd>
</dl>
</div>

View File

@@ -22,13 +22,4 @@
display: flex;
align-items: center;
}
&__popover {
display: inline-block;
margin-left: var(--digi--layout--gutter--s);
::ng-deep .digi-ng-popover__container {
z-index: $msfa__z-index-popover;
}
}
}

View File

@@ -9,6 +9,7 @@ import { distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs/op
import { DeltagareCardService } from '../../deltagare-card.service';
import { UiIconType } from '@ui/icon/icon-type.enum';
import { UiIconSize } from '@ui/icon/icon-size.enum';
import { UiPopoverPosition } from '@ui/popover/ui-popover.component';
@Component({
selector: 'msfa-deltagare-tab-personal-information',
@@ -21,6 +22,7 @@ export class DeltagareTabPersonalInformationComponent {
@Input() handledarePickerVisible: boolean;
IconType = UiIconType;
IconSize = UiIconSize;
UiPopoverPosition = UiPopoverPosition;
avropInformation$: Observable<DeltagareAvrop> = this.deltagareCardService.avropInformation$;
contactInformation$: Observable<ContactInformation> = this.deltagareCardService.contactInformation$;

View File

@@ -6,12 +6,9 @@
<ng-container *ngFor="let disability of disabilities; let index = index">
<dt>Funktionsnedsättning {{index + 1}}</dt>
<dd>
<span>{{ disability.title }}</span>
<digi-ng-popover
*ngIf="disability.description"
class="deltagare-tab-sensitive-information__popover"
[afRelativeIconSize]="true"
>{{ disability.description }}</digi-ng-popover
{{ disability.title }}
<ui-popover *ngIf="disability.description" class="deltagare-tab-sensitive-information__popover"
>{{ disability.description }}</ui-popover
>
</dd>
</ng-container>

View File

@@ -15,9 +15,5 @@
&__popover {
display: inline-block;
margin-left: var(--digi--layout--gutter--s);
::ng-deep .digi-ng-popover__container {
z-index: $msfa__z-index-popover;
}
}
}

View File

@@ -19,6 +19,7 @@ import { DeltagareTabReportsComponent } from './components/deltagare-tab-reports
import { DeltagareTabSensitiveInformationComponent } from './components/deltagare-tab-sensitive-information/deltagare-tab-sensitive-information.component';
import { DeltagareCardComponent } from './deltagare-card.component';
import { DeltagareCardService } from './deltagare-card.service';
import { UiPopoverModule } from '@ui/popover/ui-popover.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -41,6 +42,7 @@ import { DeltagareCardService } from './deltagare-card.service';
HandledarePickerFormModule,
DigiNgLayoutExpansionPanelModule,
DigiNgPopoverModule,
UiPopoverModule,
UiSkeletonModule,
UiIconModule,
UiLinkButtonModule,