feat(admin-ui): Chip can have auto-generated background color

admin-ui/src/app/common/utilities/string-to-color.ts

@@ -0,0 +1,45 @@
+/**
+ * For a given string, returns one of a pre-defined selection of colours.
+ */
+export function stringToColor(input: string): string {
+    if (!input || input === '') {
+        return '#fff';
+    }
+    const safeColors = [
+        '#FF4343',
+        '#9A0089',
+        '#881798',
+        '#10893E',
+        '#107C10',
+        '#7E735F',
+        '#2F5646',
+        '#D13438',
+        '#C239B3',
+        '#B146C2',
+        '#498205',
+        '#847545',
+        '#EF6950',
+        '#BF0077',
+        '#744DA9',
+        '#018574',
+        '#486860',
+        '#525E54',
+        '#647C64',
+        '#567C73',
+        '#DA3B01',
+        '#8764B8',
+        '#C30052',
+        '#515C6B',
+        '#4A5459',
+        '#69797E',
+        '#0063B1',
+        '#0078D7',
+        '#2D7D9A',
+        '#7A7574',
+        '#767676',
+    ];
+    const value = input.split('').reduce((prev, curr, index) => {
+        return prev + Math.round(curr.charCodeAt(0) * Math.log(index + 2));
+    }, 0);
+    return safeColors[value % safeColors.length];
+}

admin-ui/src/app/settings/components/country-list/country-list.component.html

@@ -30,7 +30,8 @@
         <td class="left">{{ country.code }}</td>
         <td class="left">{{ country.name }}</td>
         <td class="left">
-            <vdr-chip *ngFor="let zone of country.zones">{{ zone.name }}</vdr-chip>
+            <vdr-chip *ngFor="let zone of country.zones"
+                      [colorFrom]="zone.id">{{ zone.name }}</vdr-chip>
         </td>
         <td class="left">
             <clr-icon [class.enabled]="country.enabled"

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

@@ -1,8 +1,12 @@
-<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 class="wrapper"
+     [class.with-background]="colorFrom"
+     [vdrBackgroundColorFrom]="colorFrom">
+    <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>
 </div>

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

@@ -1,10 +1,18 @@
 @import "variables";
 
 :host {
-    display: inline-flex;
+    display: inline-block;
+}
+
+.wrapper {
+    display: flex;
     border: 1px solid $color-grey-4;
     border-radius: 3px;
     margin: 6px;
+    &.with-background {
+        color: $color-grey-1;
+        border-color: transparent;
+    }
 }
 
 .chip-label {

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

@@ -11,5 +11,10 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 })
 export class ChipComponent {
     @Input() icon: string;
+    /**
+     * If set, the chip will have an auto-generated background
+     * color based on the string value passed in.
+     */
+    @Input() colorFrom = '';
     @Output() iconClick = new EventEmitter<MouseEvent>();
 }

admin-ui/src/app/shared/directives/background-color-from.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, HostBinding, Input, OnChanges } from '@angular/core';
+
+import { stringToColor } from '../../common/utilities/string-to-color';
+
+/**
+ * Sets the background color of the element based on the string argument
+ * passed in.
+ */
+@Directive({
+    selector: '[vdrBackgroundColorFrom]',
+})
+export class BackgroundColorFromDirective implements OnChanges {
+    @HostBinding('style.backgroundColor') private backgroundColor: string;
+
+    @Input() private vdrBackgroundColorFrom: string;
+
+    ngOnChanges(): void {
+        this.backgroundColor = stringToColor(this.vdrBackgroundColorFrom);
+    }
+}

admin-ui/src/app/shared/shared.module.ts

@@ -32,6 +32,7 @@ import { ModalDialogComponent } from './components/modal-dialog/modal-dialog.com
 import { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
 import { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
 import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
+import { BackgroundColorFromDirective } from './directives/background-color-from.directive';
 import { FileSizePipe } from './pipes/file-size.pipe';
 import { ModalService } from './providers/modal/modal.service';
 
@@ -53,6 +54,7 @@ const DECLARATIONS = [
     ActionBarRightComponent,
     AdjustmentOperationInputComponent,
     AffixedInputComponent,
+    BackgroundColorFromDirective,
     ChipComponent,
     CurrencyInputComponent,
     CustomFieldControlComponent,