Merge branch 'master' into VM/RED-3370

src/lib/common-ui.module.ts

@@ -29,6 +29,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CapitalizePipe } from './utils/pipes/capitalize.pipe';
 import { KeycloakAngularModule } from 'keycloak-angular';
+import { SmallChipComponent } from './misc/small-chip/small-chip.component';
 
 const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule];
 const modules = [
@@ -52,12 +53,14 @@ const components = [
     ConfirmationDialogComponent,
     SideNavComponent,
     ToastComponent,
+    SmallChipComponent,
 ];
-const pipes = [SortByPipe, HumanizePipe, CapitalizePipe];
+const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, LogPipe];
 
 @NgModule({
-    declarations: [...components, ...pipes, LogPipe],
+    declarations: [...components, ...pipes],
     imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, KeycloakAngularModule],
     exports: [...components, ...pipes, ...modules, LogPipe],
 })
-export class CommonUiModule {}
+export class CommonUiModule {
+}

src/lib/misc/small-chip/small-chip.component.html

@@ -0,0 +1 @@
+<div [style.background-color]="color" class="chip"></div>

src/lib/misc/small-chip/small-chip.component.scss

@@ -0,0 +1,5 @@
+.chip {
+    width: 12px;
+    height: 6px;
+    border-radius: 6px;
+}

src/lib/misc/small-chip/small-chip.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'redaction-small-chip [color]',
+    templateUrl: './small-chip.component.html',
+    styleUrls: ['./small-chip.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SmallChipComponent {
+    @Input() color!: string;
+}