refactor(admin-ui): Extract status badge into own component

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html

@@ -8,7 +8,7 @@
                 *ngIf="shouldDisplayLink(section)"
             >
                 <ng-container *ngIf="navBuilderService.sectionBadges[section.id] | async as sectionBadge">
-                    <div *ngIf="sectionBadge !== 'none'" class="status-badge" [class]="sectionBadge"></div>
+                    <vdr-status-badge *ngIf="sectionBadge !== 'none'" [type]="sectionBadge"></vdr-status-badge>
                 </ng-container>
                 <input [id]="section.id" type="checkbox" [checked]="section.collapsedByDefault" />
                 <label [for]="section.id">{{ section.label | translate }}</label>
@@ -22,11 +22,7 @@
                                 routerLinkActive="active"
                             >
                                 <ng-container *ngIf="item.statusBadge | async as itemBadge">
-                                    <div
-                                        *ngIf="itemBadge.type !== 'none'"
-                                        class="status-badge"
-                                        [class]="itemBadge.type"
-                                    ></div>
+                                    <vdr-status-badge *ngIf="itemBadge.type !== 'none'" [type]="itemBadge.type"></vdr-status-badge>
                                 </ng-container>
                                 <clr-icon [attr.shape]="item.icon || 'block'" size="20"></clr-icon>
                                 {{ item.label | translate }}

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss

@@ -20,33 +20,11 @@ nav.sidenav {
 .nav-link {
     position: relative;
 }
-
-.status-badge {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    border-radius: 50%;
-    border: 1px solid var(--color-component-border-100);
-
-    &.info {
-        background-color: var(--color-primary-600);
-    }
-    &.success {
-        background-color: var(--color-success-500);
-    }
-    &.warning {
-        background-color: var(--color-warning-500);
-    }
-    &.error {
-        background-color: var(--color-error-400);
-    }
-}
-
-.nav-group .status-badge {
+.nav-group vdr-status-badge {
     left: 10px;
     top: 6px;
 }
-.nav-link .status-badge {
+.nav-link vdr-status-badge {
     left: 25px;
     top: 3px;
 }

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -157,6 +157,7 @@ export * from './shared/components/rich-text-editor/prosemirror/utils';
 export * from './shared/components/rich-text-editor/rich-text-editor.component';
 export * from './shared/components/select-toggle/select-toggle.component';
 export * from './shared/components/simple-dialog/simple-dialog.component';
+export * from './shared/components/status-badge/status-badge.component';
 export * from './shared/components/table-row-action/table-row-action.component';
 export * from './shared/components/tag-selector/tag-selector.component';
 export * from './shared/components/timeline-entry/timeline-entry.component';

packages/admin-ui/src/lib/core/src/shared/components/status-badge/status-badge.component.html

@@ -0,0 +1 @@
+<div class="status-badge" [class]="type"></div>

packages/admin-ui/src/lib/core/src/shared/components/status-badge/status-badge.component.scss

@@ -0,0 +1,25 @@
+:host {
+    display: block;
+    position: absolute;
+}
+
+.status-badge {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid var(--color-component-border-100);
+
+    &.info {
+        background-color: var(--color-primary-600);
+    }
+    &.success {
+        background-color: var(--color-success-500);
+    }
+    &.warning {
+        background-color: var(--color-warning-500);
+    }
+    &.error {
+        background-color: var(--color-error-400);
+    }
+}
+

packages/admin-ui/src/lib/core/src/shared/components/status-badge/status-badge.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'vdr-status-badge',
+    templateUrl: './status-badge.component.html',
+    styleUrls: ['./status-badge.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StatusBadgeComponent {
+    @Input() type: 'info' | 'success' | 'warning' | 'error' = 'info';
+}

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -73,6 +73,7 @@ import { LinkDialogComponent } from './components/rich-text-editor/link-dialog/l
 import { RichTextEditorComponent } from './components/rich-text-editor/rich-text-editor.component';
 import { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
 import { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component';
+import { StatusBadgeComponent } from './components/status-badge/status-badge.component';
 import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
 import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
 import { TimelineEntryComponent } from './components/timeline-entry/timeline-entry.component';
@@ -219,6 +220,7 @@ const DECLARATIONS = [
     ManageTagsDialogComponent,
     RelationSelectorDialogComponent,
     RelationCardComponent,
+    StatusBadgeComponent,
 ];
 
 const DYNAMIC_FORM_INPUTS = [