From 3c5d7d681d18a786f2ddbdea783ac6157315286a Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Fri, 30 Jul 2021 15:38:31 +0300
Subject: [PATCH] move round checkbox to common lib

---
 .../downloads-list-screen.component.html      |  2 +-
 .../active-fields-listing.component.html      |  8 ++---
 .../dictionary-listing-screen.component.html  |  6 ++--
 ...r-attributes-listing-screen.component.html |  6 ++--
 ...er-templates-listing-screen.component.html |  6 ++--
 ...e-attributes-listing-screen.component.html |  8 ++---
 ...e-attributes-listing-screen.component.scss |  2 +-
 .../screens/trash/trash-screen.component.html |  6 ++--
 .../user-listing-screen.component.html        |  6 ++--
 .../file-workload.component.html              | 10 +++---
 .../file-workload.component.scss              |  2 +-
 .../team-members-manager.component.html       |  2 +-
 .../dossier-overview-screen.component.html    |  6 ++--
 .../checkbox/round-checkbox.component.html    |  4 ---
 .../checkbox/round-checkbox.component.scss    | 34 -------------------
 .../checkbox/round-checkbox.component.ts      | 29 ----------------
 .../table-header/table-header.component.html  |  4 +--
 .../src/app/modules/shared/shared.module.ts   |  2 --
 apps/red-ui/src/assets/styles/red-tables.scss |  4 +--
 libs/common-ui                                |  2 +-
 20 files changed, 40 insertions(+), 109 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 55d72061f..f41353146 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -22,7 +22,7 @@
                 <!--      Table lines -->
                 <div *cdkVirtualFor="let download of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
                     <div (click)="toggleEntitySelected($event, download)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(download)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(download)"></iqser-round-checkbox>
                     </div>
 
                     <div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index 4420bd36b..e036c7165 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -1,9 +1,9 @@
 <div class="header-item">
-    <redaction-round-checkbox
+    <iqser-round-checkbox
         (click)="toggleSelectAll()"
         [active]="screenStateService.areAllEntitiesSelected$ | async"
         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-    ></redaction-round-checkbox>
+    ></iqser-round-checkbox>
     <span class="all-caps-label">
         {{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }}
     </span>
@@ -93,7 +93,7 @@
         class="table-item"
     >
         <div (click)="toggleEntitySelected($event, field)" class="selection-column">
-            <redaction-round-checkbox [active]="isSelected(field)"></redaction-round-checkbox>
+            <iqser-round-checkbox [active]="isSelected(field)"></iqser-round-checkbox>
         </div>
         <div [class.editing]="field.editingName" class="name">
             <div *ngIf="!field.editingName">
@@ -142,7 +142,7 @@
             <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
         </div>
         <div class="center">
-            <redaction-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></redaction-round-checkbox>
+            <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
         </div>
         <div class="actions-container">
             <div class="action-buttons">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 99ad87dec..972b7fc2b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -21,11 +21,11 @@
 
         <div class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
@@ -102,7 +102,7 @@
                     class="table-item pointer"
                 >
                     <div (click)="toggleEntitySelected($event, dict)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(dict)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(dict)"></iqser-round-checkbox>
                     </div>
 
                     <div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index 982a46c10..cfad15a4d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -21,11 +21,11 @@
 
         <div class="content-container">
             <div *ngIf="(screenStateService.noData$ | async) === false" class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{
@@ -102,7 +102,7 @@
                     class="table-item pointer"
                 >
                     <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(attribute)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
                     </div>
 
                     <div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index e6f7b74fd..ed7af38bd 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -12,11 +12,11 @@
         <div class="red-content-inner">
             <div class="content-container">
                 <div class="header-item">
-                    <redaction-round-checkbox
+                    <iqser-round-checkbox
                         (click)="toggleSelectAll()"
                         [active]="screenStateService.areAllEntitiesSelected$ | async"
                         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
+                    ></iqser-round-checkbox>
 
                     <span class="all-caps-label">
                         {{
@@ -94,7 +94,7 @@
                         class="table-item pointer"
                     >
                         <div (click)="toggleEntitySelected($event, dossierTemplate)" class="selection-column">
-                            <redaction-round-checkbox [active]="isSelected(dossierTemplate)"></redaction-round-checkbox>
+                            <iqser-round-checkbox [active]="isSelected(dossierTemplate)"></iqser-round-checkbox>
                         </div>
 
                         <div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 12ac3ee38..69db731d0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -21,11 +21,11 @@
 
         <div class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{
@@ -121,7 +121,7 @@
                 <!--      Table lines -->
                 <div *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async" class="table-item">
                     <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(attribute)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
                     </div>
 
                     <div class="label">
@@ -142,7 +142,7 @@
                         {{ attribute.csvColumnHeader }}
                     </div>
                     <div class="center">
-                        <redaction-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></redaction-round-checkbox>
+                        <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
                     </div>
                     <div class="actions-container">
                         <div *ngIf="permissionsService.isAdmin()" class="action-buttons">
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index 239036305..b4d8ef8d5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -67,6 +67,6 @@ redaction-table-col-name::ng-deep {
     visibility: hidden;
 }
 
-.table-item > div:not(.selection-column) redaction-round-checkbox {
+.table-item > div:not(.selection-column) iqser-round-checkbox {
     cursor: default;
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index 7641ba564..8e07e620f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -6,11 +6,11 @@
     <div class="red-content-inner">
         <div class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
@@ -69,7 +69,7 @@
             <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
                 <div *cdkVirtualFor="let entity of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
                     <div (click)="toggleEntitySelected($event, entity)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(entity)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(entity)"></iqser-round-checkbox>
                     </div>
 
                     <div class="filename">
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 5b7b3d9da..b486f7966 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -34,11 +34,11 @@
         <div class="red-content-inner">
             <div [class.extended]="collapsedDetails" class="content-container">
                 <div class="header-item">
-                    <redaction-round-checkbox
+                    <iqser-round-checkbox
                         (click)="toggleSelectAll()"
                         [active]="screenStateService.areAllEntitiesSelected$ | async"
                         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                    ></redaction-round-checkbox>
+                    ></iqser-round-checkbox>
 
                     <span class="all-caps-label">
                         {{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
@@ -83,7 +83,7 @@
                     <!--      Table lines -->
                     <div *cdkVirtualFor="let user of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
                         <div (click)="toggleEntitySelected($event, user)" class="selection-column">
-                            <redaction-round-checkbox [active]="isSelected(user)"></redaction-round-checkbox>
+                            <iqser-round-checkbox [active]="isSelected(user)"></iqser-round-checkbox>
                         </div>
 
                         <div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
index 33acd987b..a2919dc27 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
@@ -38,11 +38,11 @@
     </div>
     <div *ngIf="multiSelectActive" class="multi-select">
         <div class="selected-wrapper">
-            <redaction-round-checkbox
+            <iqser-round-checkbox
                 (click)="!!selectedAnnotations?.length && selectAnnotations.emit()"
                 [indeterminate]="!!selectedAnnotations?.length"
-                type="red-bg"
-            ></redaction-round-checkbox>
+                type="with-bg"
+            ></iqser-round-checkbox>
             <span class="all-caps-label">{{ selectedAnnotations?.length || 0 }} selected </span>
             <redaction-annotation-actions
                 (annotationsChanged)="annotationsChanged.emit($event)"
@@ -195,10 +195,10 @@
                                     </div>
 
                                     <div class="active-icon-marker-container">
-                                        <redaction-round-checkbox
+                                        <iqser-round-checkbox
                                             *ngIf="multiSelectActive && isSelected(annotation)"
                                             [active]="true"
-                                        ></redaction-round-checkbox>
+                                        ></iqser-round-checkbox>
                                     </div>
                                 </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
index 010a90774..85ecf735e 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
@@ -59,7 +59,7 @@
             display: flex;
             align-items: center;
 
-            redaction-round-checkbox.inactive {
+            iqser-round-checkbox .wrapper.inactive {
                 cursor: default;
             }
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
index 7a057fa9c..8e0bd8f9e 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
@@ -52,7 +52,7 @@
             <redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>
             <div class="actions">
                 <div (click)="toggleApprover(userId, $event)" *ngIf="!isOwner(userId)" class="make-approver">
-                    <redaction-round-checkbox [active]="isApprover(userId)" class="mr-8"></redaction-round-checkbox>
+                    <iqser-round-checkbox [active]="isApprover(userId)" class="mr-8"></iqser-round-checkbox>
                     <span translate="assign-dossier-owner.dialog.make-approver"></span>
                 </div>
                 <mat-icon *ngIf="!isOwner(userId)" svgIcon="red:check"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
index baf2573b4..ccefdea92 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@@ -37,11 +37,11 @@
     <div class="red-content-inner">
         <div [class.extended]="collapsedDetails" class="content-container">
             <div class="header-item">
-                <redaction-round-checkbox
+                <iqser-round-checkbox
                     (click)="toggleSelectAll()"
                     [active]="screenStateService.areAllEntitiesSelected$ | async"
                     [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></redaction-round-checkbox>
+                ></iqser-round-checkbox>
 
                 <span class="all-caps-label">
                     {{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}
@@ -113,7 +113,7 @@
                     class="table-item"
                 >
                     <div (click)="toggleEntitySelected($event, fileStatus)" class="selection-column">
-                        <redaction-round-checkbox [active]="isSelected(fileStatus)"></redaction-round-checkbox>
+                        <iqser-round-checkbox [active]="isSelected(fileStatus)"></iqser-round-checkbox>
                     </div>
 
                     <div>
diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
deleted file mode 100644
index 6f8249aac..000000000
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div #wrapper [class.inactive]="!active && !indeterminate" [class.red-bg]="type === 'red-bg'" class="wrapper">
-    <mat-icon *ngIf="active && !indeterminate" svgIcon="red:radio-selected"></mat-icon>
-    <mat-icon *ngIf="indeterminate" svgIcon="red:radio-indeterminate"></mat-icon>
-</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss
deleted file mode 100644
index 4993062b2..000000000
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../../../../../assets/styles/variables';
-
-:host {
-    cursor: pointer;
-}
-
-.wrapper {
-    width: var(--size);
-    height: var(--size);
-    box-sizing: border-box;
-    border-radius: 50%;
-
-    &.inactive {
-        border: 1px solid $grey-5;
-        background-color: $white;
-    }
-
-    .mat-icon {
-        color: $primary;
-        width: var(--size);
-        height: var(--size);
-    }
-
-    &.red-bg {
-        .mat-icon {
-            color: $white;
-        }
-
-        &.inactive {
-            border: 1px solid $grey-2;
-            background-color: transparent;
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts
deleted file mode 100644
index 1371ac55e..000000000
--- a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
-
-@Component({
-    selector: 'redaction-round-checkbox',
-    templateUrl: './round-checkbox.component.html',
-    styleUrls: ['./round-checkbox.component.scss']
-})
-export class RoundCheckboxComponent implements OnInit, OnChanges {
-    @Input() size = 20;
-    @Input() active: boolean;
-    @Input() indeterminate: boolean;
-    @Input() type: 'default' | 'red-bg';
-
-    @ViewChild('wrapper', { static: true }) private readonly _wrapper: ElementRef;
-
-    @HostBinding('class.active') private _activeClass: boolean;
-    @HostBinding('class.inactive') private _inactiveClass: boolean;
-    @HostBinding('class.indeterminate') private _indeterminateClass: boolean;
-
-    ngOnInit(): void {
-        this._wrapper.nativeElement.style.setProperty('--size', this.size + 'px');
-    }
-
-    ngOnChanges(): void {
-        this._activeClass = this.active && !this.indeterminate;
-        this._inactiveClass = !this.active && !this.indeterminate;
-        this._indeterminateClass = this.indeterminate;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
index 3b0b92d8f..689a69a0d 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
@@ -1,10 +1,10 @@
 <div [class.selection-enabled]="selectionEnabled" class="header-item">
-    <redaction-round-checkbox
+    <iqser-round-checkbox
         (click)="screenStateService.selectEntities()"
         *ngIf="selectionEnabled"
         [active]="screenStateService.areAllEntitiesSelected$ | async"
         [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-    ></redaction-round-checkbox>
+    ></iqser-round-checkbox>
 
     <span class="all-caps-label">
         {{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index b0ea64e18..4062c0c0f 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -22,7 +22,6 @@ import { HiddenActionComponent } from './components/hidden-action/hidden-action.
 import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component';
 import { EmptyStateComponent } from './components/empty-state/empty-state.component';
 import { SortByPipe } from './pipes/sort-by.pipe';
-import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.component';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { SelectComponent } from './components/select/select.component';
@@ -56,7 +55,6 @@ const components = [
     ConfirmationDialogComponent,
     EmptyStateComponent,
     SortByPipe,
-    RoundCheckboxComponent,
     SelectComponent,
     SideNavComponent,
     DictionaryManagerComponent,
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index e2badc255..f0ec2d474 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -58,7 +58,7 @@ cdk-virtual-scroll-viewport {
                 &.selection-column {
                     padding-right: 0 !important;
 
-                    redaction-round-checkbox {
+                    iqser-round-checkbox .wrapper {
                         opacity: 0;
                         transition: opacity 0.2s;
 
@@ -112,7 +112,7 @@ cdk-virtual-scroll-viewport {
                 > div {
                     background-color: $grey-8;
 
-                    &.selection-column redaction-round-checkbox {
+                    &.selection-column iqser-round-checkbox .wrapper {
                         opacity: 1;
                     }
                 }
diff --git a/libs/common-ui b/libs/common-ui
index 1b81fa715..1633911e1 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 1b81fa7153792f40d9810707884f889c449972d5
+Subproject commit 1633911e1339b39f96f243885defec4a92b6e6eb