feat(admin-ui): Create ChipComponent

admin-ui/src/app/shared/components/chip/chip.component.html

@@ -0,0 +1,8 @@
+<div class="chip-label">
+    <ng-content></ng-content>
+</div>
+<div class="chip-icon" *ngIf="icon">
+    <button (click)="iconClick.emit($event)">
+        <clr-icon [attr.shape]="icon"></clr-icon>
+    </button>
+</div>

admin-ui/src/app/shared/components/chip/chip.component.scss

@@ -0,0 +1,24 @@
+@import "variables";
+
+:host {
+    display: inline-flex;
+    border: 1px solid $color-grey-4;
+    border-radius: 3px;
+}
+
+.chip-label {
+    padding: 0 6px;
+}
+
+.chip-icon {
+    border-left: 1px solid $color-grey-4;
+    padding: 0 3px;
+
+    button {
+        cursor: pointer;
+        background: none;
+        margin: 0;
+        padding: 0;
+        border: none;
+    }
+}

admin-ui/src/app/shared/components/chip/chip.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * A chip component for displaying a label with an optional action icon.
+ */
+@Component({
+    selector: 'vdr-chip',
+    templateUrl: './chip.component.html',
+    styleUrls: ['./chip.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChipComponent {
+    @Input() icon: string;
+    @Output() iconClick = new EventEmitter<MouseEvent>();
+}