Merge branch 'feature/TV-847-checkbox-implementation' into develop

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

@@ -48,13 +48,13 @@
           <strong>Du måste välja en eller flera tjänster för att kunna välja utförande verksamheter.</strong>
         </p>
         <ng-container *ngIf="!isLoadingUtforandeVerksamheter else loadingUtforandeVerksamheterTemplate">
-          <digi-ng-form-checkbox
+          <ui-checkbox
-            [afId]="selectAllUtforandeVerksamheterElementId"
             class="edit-employee-form__choose-all-utforande-verksamheter"
+            [uiId]="selectAllUtforandeVerksamheterElementId"
             [formControl]="selectAllUtforandeVerksamheterFormControl"
-            [afLabel]="'Välj alla utförande verksamheter och alla utförande adresser'"
+            uiLabel="Välj alla utförande verksamheter och alla utförande adresser"
-            [afInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
+            [uiInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
-          ></digi-ng-form-checkbox>
+          ></ui-checkbox>
 
           <msfa-tree-nodes-selector
             *ngIf="!selectAllUtforandeVerksamheterFormControl.value"
@@ -66,6 +66,10 @@
             [validationMessages]="[editEmployeeFormGroup.errors?.utforandeVerksamheter]"
             (selectedTreeNodesChanged)="updateToggleAllUtforandeVerksamheter()"
           ></msfa-tree-nodes-selector>
+          <ui-validation-message
+            [uiShowValidationMessage]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
+            uiValidationMessage="Minst en utförande verksamhet och adress måste väljas"
+          ></ui-validation-message>
         </ng-container>
         <ng-template #loadingUtforandeVerksamheterTemplate>
           <digi-ng-loader-spinner
@@ -87,10 +91,7 @@
           <legend class="msfa__a11y-sr-only">Välj roller</legend>
           <ul class="edit-employee-form__roles">
             <li class="edit-employee-form__role" *ngFor="let role of availableRoles">
-              <digi-ng-form-checkbox
+              <ui-checkbox [formControlName]="getFormControlName(role)" [uiLabel]="role.name"></ui-checkbox>
-                [afLabel]="role.name"
-                [formControlName]="getFormControlName(role)"
-              ></digi-ng-form-checkbox>
             </li>
           </ul>
         </fieldset>

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

@@ -1,14 +1,10 @@
-import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
-import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
-import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
-import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { EmployeeFormComponent } from './employee-form.component';
+import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 
 describe('EmployeeFormComponent', () => {
   let component: EmployeeFormComponent;
@@ -19,16 +15,7 @@ describe('EmployeeFormComponent', () => {
       void TestBed.configureTestingModule({
         schemas: [CUSTOM_ELEMENTS_SCHEMA],
         declarations: [EmployeeFormComponent],
-        imports: [
+        imports: [RouterTestingModule, HttpClientTestingModule, ReactiveFormsModule, UiCheckboxModule],
-          RouterTestingModule,
-          HttpClientTestingModule,
-          ReactiveFormsModule,
-          DigiNgFormInputModule,
-          DigiNgFormRadiobuttonGroupModule,
-          DigiNgFormDatepickerModule,
-          DigiNgPopoverModule,
-          DigiNgFormCheckboxModule,
-        ],
       }).compileComponents();
     })
   );

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

@@ -1,10 +1,4 @@
-import { DigiNgButtonModule } from '@af/digi-ng/_button/button';
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
-import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
-import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
-import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
-import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -16,10 +10,12 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
 import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';
 import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
+import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 import { UiInputModule } from '@ui/input/input.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiSelectModule } from '@ui/select/select.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
+import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
 import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
 import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
 import { EmployeeFormComponent } from './employee-form.component';
@@ -32,12 +28,7 @@ import { EmployeeFormComponent } from './employee-form.component';
     RouterModule.forChild([{ path: '', component: EmployeeFormComponent }]),
     ReactiveFormsModule,
     LocalDatePipeModule,
-    DigiNgFormRadiobuttonGroupModule,
+    UiCheckboxModule,
-    DigiNgFormDatepickerModule,
-    DigiNgPopoverModule,
-    DigiNgFormCheckboxModule,
-    DigiNgButtonModule,
-    DigiNgLoaderSpinnerModule,
     UiSkeletonModule,
     UiSelectModule,
     LayoutModule,
@@ -49,6 +40,8 @@ import { EmployeeFormComponent } from './employee-form.component';
     RolesDialogModule,
     UiLinkButtonModule,
     UiInputModule,
+    UiCheckboxModule,
+    UiValidationMessageModule,
     PreventDoubleSubmitModule,
   ],
 })

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

@@ -1,4 +1,3 @@
-import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -21,7 +20,6 @@ import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
     LayoutModule,
     AvropListModule,
     AvropFiltersModule,
-    DigiNgProgressProgressbarModule,
     UiSkeletonModule,
     UiLoaderModule,
     HandledarePickerFormModule,

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

@@ -1,4 +1,3 @@
-import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -40,7 +39,6 @@ import { UiPopoverModule } from '@ui/popover/ui-popover.module';
     HideTextModule,
     UiLoaderModule,
     HandledarePickerFormModule,
-    DigiNgPopoverModule,
     UiPopoverModule,
     UiSkeletonModule,
     UiIconModule,

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.spec.ts

@@ -1,5 +1,4 @@
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -22,7 +21,6 @@ describe('AvvikelseReportFormComponent', () => {
         RouterTestingModule,
         HttpClientTestingModule,
         ReactiveFormsModule,
-        DigiNgFormRadiobuttonGroupModule,
         DigiNgFormDatepickerModule,
         ApmModule,
       ],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts

@@ -1,8 +1,5 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
-import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
-import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -29,9 +26,7 @@ import { AvvikelseReportFormService } from './avvikelse-report-form.service';
     RouterModule.forChild([{ path: '', component: AvvikelseReportFormComponent }]),
     LayoutModule,
     ReactiveFormsModule,
-    DigiNgFormRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
-    DigiNgProgressProgressbarModule,
     ReportLayoutModule,
     ConfirmDialogModule,
     UiBackLinkModule,
@@ -39,7 +34,6 @@ import { AvvikelseReportFormService } from './avvikelse-report-form.service';
     UiLoaderModule,
     UiSelectModule,
     ReportDescriptionListModule,
-    DigiNgFormInputModule,
     DigiNgDialogModule,
     UiTextareaModule,
     UiLinkButtonModule,

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.spec.ts

@@ -1,5 +1,3 @@
-import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -8,6 +6,8 @@ import { LayoutComponent } from '@msfa-shared/components/layout/layout.component
 import { GemensamPlaneringFormComponent } from './gemensam-planering-form.component';
 import { GemensamPlaneringFormService } from './gemensam-planering-form.service';
 import { ApmModule } from '@elastic/apm-rum-angular';
+import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
+import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 
 describe('GemensamPlaneringFormComponent', () => {
   let component: GemensamPlaneringFormComponent;
@@ -17,13 +17,7 @@ describe('GemensamPlaneringFormComponent', () => {
     await TestBed.configureTestingModule({
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [GemensamPlaneringFormComponent, LayoutComponent],
-      imports: [
+      imports: [RouterTestingModule, HttpClientTestingModule, ApmModule, UiCheckboxModule, UiRadiobuttonGroupModule],
-        RouterTestingModule,
-        HttpClientTestingModule,
-        DigiNgFormRadiobuttonGroupModule,
-        DigiNgFormCheckboxModule,
-        ApmModule,
-      ],
       providers: [GemensamPlaneringFormService],
     }).compileComponents();
   });

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts

@@ -1,6 +1,4 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
-import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
-import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -17,6 +15,7 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { GemensamPlaneringFormComponent } from './gemensam-planering-form.component';
 import { GemensamPlaneringFormService } from './gemensam-planering-form.service';
+import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -25,7 +24,6 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
     CommonModule,
     RouterModule.forChild([{ path: '', component: GemensamPlaneringFormComponent }]),
     LayoutModule,
-    DigiNgProgressProgressbarModule,
     UiRadiobuttonGroupModule,
     ReactiveFormsModule,
     ReportLayoutModule,
@@ -33,7 +31,7 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
     UiLoaderModule,
     ReportDescriptionListModule,
     UiSkeletonModule,
-    DigiNgFormCheckboxModule,
+    UiCheckboxModule,
     DigiNgDialogModule,
     UiValidationMessageModule,
     UiLinkButtonModule,

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.spec.ts

@@ -1,4 +1,3 @@
-import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -8,6 +7,7 @@ import { LayoutComponent } from '@msfa-shared/components/layout/layout.component
 import { InformativRapportFormComponent } from './informativ-rapport-form.component';
 import { InformativRapportFormService } from './informativ-rapport-form.service';
 import { ApmModule } from '@elastic/apm-rum-angular';
+import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 
 describe('InformativRapportFormComponent', () => {
   let component: InformativRapportFormComponent;
@@ -17,13 +17,7 @@ describe('InformativRapportFormComponent', () => {
     await TestBed.configureTestingModule({
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [InformativRapportFormComponent, LayoutComponent],
-      imports: [
+      imports: [RouterTestingModule, HttpClientTestingModule, ReactiveFormsModule, ApmModule, UiRadiobuttonGroupModule],
-        RouterTestingModule,
-        HttpClientTestingModule,
-        ReactiveFormsModule,
-        ApmModule,
-        DigiNgFormRadiobuttonGroupModule,
-      ],
       providers: [InformativRapportFormService],
     }).compileComponents();
   });

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html

@@ -97,15 +97,12 @@
               >
                 <div class="periodisk-redovisning-form__activities">
                   <div class="periodisk-redovisning-form__no-activities-has-been-conducted-checkbox">
-                    <digi-ng-form-checkbox
+                    <ui-checkbox
                       formControlName="noActivitiesHasBeenConducted"
-                      afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
+                      uiLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
-                      [afInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
+                      [uiInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
-                    ></digi-ng-form-checkbox>
-                    <ui-validation-message
-                      [uiShowValidationMessage]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
                       [uiValidationMessage]="formErrors?.activitiesMismatch"
-                    ></ui-validation-message>
+                    ></ui-checkbox>
                   </div>
 
                   <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
@@ -115,11 +112,11 @@
                       *ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
                     >
                       <ng-container [formGroupName]="i">
-                        <digi-ng-form-checkbox
+                        <ui-checkbox
                           #isSelected
                           formControlName="isSelected"
-                          [afLabel]="activitiesFormArrayMetadata[i].name"
+                          [uiLabel]="activitiesFormArrayMetadata[i].name"
-                        ></digi-ng-form-checkbox>
+                        ></ui-checkbox>
                         <div class="periodisk-redovisning-form__activity-details" *ngIf="isSelected.currentValue">
                           <ui-input
                             class="periodisk-redovisning-form__activity-hours"
@@ -135,20 +132,17 @@
                           ></ui-input>
 
                           <div class="periodisk-redovisning-form__activity-group">
-                            <digi-ng-form-checkbox
+                            <ui-checkbox
                               formControlName="performedRemotely"
-                              [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
+                              uiLabel="Utfört på distans"
-                              afLabel="Utfört på distans"
+                              [uiInvalid]="activityLocationIsInvalid(activityFormGroup)"
-                            ></digi-ng-form-checkbox>
+                            ></ui-checkbox>
-                            <digi-ng-form-checkbox
+                            <ui-checkbox
                               formControlName="performedPhysically"
-                              [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
+                              uiLabel="Utfört på plats"
-                              afLabel="Utfört på plats"
+                              [uiInvalid]="activityLocationIsInvalid(activityFormGroup)"
-                            ></digi-ng-form-checkbox>
-                            <ui-validation-message
-                              [uiShowValidationMessage]="activityLocationIsInvalid(activityFormGroup)"
                               [uiValidationMessage]="activityFormGroup.errors?.locationCheckboxes"
-                            ></ui-validation-message>
+                            ></ui-checkbox>
                           </div>
                         </div>
                       </ng-container>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.spec.ts

@@ -1,4 +1,3 @@
-import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -8,6 +7,7 @@ import { LayoutComponent } from '@msfa-shared/components/layout/layout.component
 import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component';
 import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.service';
 import { ApmModule } from '@elastic/apm-rum-angular';
+import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 
 describe('PeriodiskRedovisningFormComponent', () => {
   let component: PeriodiskRedovisningFormComponent;
@@ -22,7 +22,7 @@ describe('PeriodiskRedovisningFormComponent', () => {
         ApmModule,
         HttpClientTestingModule,
         DigiNgFormRadiobuttonGroupModule,
-        DigiNgFormCheckboxModule,
+        UiCheckboxModule,
       ],
       providers: [PeriodiskRedovisningFormService],
     }).compileComponents();

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts

@@ -1,5 +1,4 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
-import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -7,6 +6,7 @@ import { RouterModule } from '@angular/router';
 import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UiBackLinkModule } from '@ui/back-link/back-link.module';
+import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 import { UiInputModule } from '@ui/input/input.module';
 import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
@@ -34,10 +34,10 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
     UiSelectModule,
     UiSkeletonModule,
     DigiNgDialogModule,
-    DigiNgFormCheckboxModule,
     UiRadiobuttonGroupModule,
     UiLinkButtonModule,
     UiInputModule,
+    UiCheckboxModule,
     UiValidationMessageModule,
     PreventDoubleSubmitModule,
   ],

apps/mina-sidor-fa/src/app/pages/logout/logout.module.ts

@@ -1,4 +1,3 @@
-import { DigiNgButtonModule } from '@af/digi-ng/_button/button';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -7,6 +6,6 @@ import { LogoutComponent } from './logout.component';
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [LogoutComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: LogoutComponent }]), DigiNgButtonModule],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: LogoutComponent }])],
 })
 export class LogoutModule {}

apps/mina-sidor-fa/src/app/pages/start/start.module.ts

@@ -1,4 +1,3 @@
-import { DigiNgCardModule } from '@af/digi-ng/_card/card';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -15,7 +14,6 @@ import { StartService } from './start.service';
     CommonModule,
     RouterModule.forChild([{ path: '', component: StartComponent }]),
     LayoutModule,
-    DigiNgCardModule,
     UiLoaderModule,
     NewsModule,
   ],

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

@@ -14,12 +14,12 @@
               class="multiselect-panel__checkboxes-item"
               *ngFor="let multiselectOption of availableOptions; let i = index"
             >
-              <digi-ng-form-checkbox
+              <ui-checkbox
-                [afLabel]="multiselectOption.label + ' (' + (multiselectOption.count || 0) + ')'"
-                (change)="setOptionState(multiselectOption, $event.target.checked)"
                 [ngModel]="isSelected(multiselectOption)"
+                [uiLabel]="multiselectOption.label + ' (' + (multiselectOption.count || 0) + ')'"
                 [name]="multiselectOption.id"
-              ></digi-ng-form-checkbox>
+                (uiOnChange)="setOptionState(multiselectOption, $event)"
+              ></ui-checkbox>
             </li>
             <ng-container *ngIf="selectedUnavailableOptions.length">
               <li
@@ -27,13 +27,13 @@
                 [ngClass]="{'multiselect-panel__checkboxes-item--unavailable': i === 0}"
                 *ngFor="let multiselectOption of selectedUnavailableOptions; let i = index"
               >
-                <digi-ng-form-checkbox
+                <ui-checkbox
-                  [afLabel]="multiselectOption.label + ' (0)'"
-                  (change)="setOptionState(multiselectOption, $event.target.checked)"
                   [ngModel]="isSelected(multiselectOption)"
+                  [uiLabel]="multiselectOption.label + ' (0)'"
+                  [uiSecondary]="true"
                   [name]="multiselectOption.id"
-                  [afSecondary]="true"
+                  (uiOnChange)="setOptionState(multiselectOption, $event)"
-                ></digi-ng-form-checkbox>
+                ></ui-checkbox>
               </li>
             </ng-container>
           </ul>

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

@@ -3,13 +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 { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
 import { MultiselectComponent } from '@ui/multiselect/multiselect.component';
-import { MultiselectPanelComponent } from './multiselect-panel/multiselect-panel.component';
 import { UiOverlayModule } from '@ui/overlay/overlay.module';
+import { MultiselectPanelComponent } from './multiselect-panel/multiselect-panel.component';
 
 @NgModule({
   declarations: [MultiselectComponent, MultiselectPanelComponent],
-  imports: [CommonModule, A11yModule, DigiNgFormCheckboxModule, FormsModule, UiOverlayModule],
+  imports: [CommonModule, A11yModule, DigiNgFormCheckboxModule, FormsModule, UiOverlayModule, UiCheckboxModule],
   exports: [MultiselectComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })