move round checkbox to common lib

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>

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">

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>

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>

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>

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">

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;
 }

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">

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>

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"
+                type="with-bg"
-            ></redaction-round-checkbox>
+            ></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>
 

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;
             }
 

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>

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>

apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html

@@ -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>

apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss

@@ -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;
-        }
-    }
-}

apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts

@@ -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;
-    }
-}

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) } }}

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,

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;
                     }
                 }

libs/common-ui

@@ -1 +1 @@
-Subproject commit 1b81fa7153792f40d9810707884f889c449972d5
+Subproject commit 1633911e1339b39f96f243885defec4a92b6e6eb