added small chip component

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,11 +53,12 @@ const components = [
     ConfirmationDialogComponent,
     SideNavComponent,
     ToastComponent,
+    SmallChipComponent,
 ];
 const pipes = [SortByPipe, HumanizePipe, CapitalizePipe];
 
 @NgModule({
-    declarations: [...components, ...pipes, LogPipe],
+    declarations: [...components, ...pipes, LogPipe, SmallChipComponent],
     imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, KeycloakAngularModule],
     exports: [...components, ...pipes, ...modules, LogPipe],
 })

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

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

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