added breadcrumbs option

Author: nodeful

ui/src/app/components/options/options.component.html

@@ -39,9 +39,10 @@
         <div *ngIf="option.type === 'label'" 
           [class]="option.url ? 'clickable' : ''" 
           (click)="openUrl(option.url)"
-          [eqmTooltip]="option.tooltip"
+          fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center"
         >
           <eqm-label>{{option.label}}</eqm-label>
+          <eqm-question *ngIf="option.tooltip" [eqmTooltip]="option.tooltip"></eqm-question>
         </div>
 
         <!-- HTML -->
@@ -60,6 +61,10 @@
             (itemSelected)="option.itemSelected($event)"
             ></eqm-dropdown>
         </div>
+
+        <div *ngIf="option.type === 'breadcrumbs'">
+          <eqm-breadcrumbs [crumbs]="option.crumbs" (crumbClicked)="option.crumbClicked($event)"></eqm-breadcrumbs>
+        </div>
     </div>
   </div>
 </div>

ui/src/app/components/options/options.component.ts

@@ -59,7 +59,15 @@ export interface SelectOption extends BaseOptions {
   selected?: (id: string) => any
 }
 
-export type Option = ButtonOption | CheckboxOption | SelectOption | DividerOption | LabelOption | HTMLOption | DropdownOption
+export interface BreadcrumbsOption extends Omit<BaseOptions, 'key' | 'label'> {
+  type: 'breadcrumbs'
+  crumbs: string[]
+  crumbClicked: (event: { crumb: string, index: number }) => void | Promise<void>
+}
+
+export type Option = ButtonOption | CheckboxOption | SelectOption 
+| DividerOption | LabelOption | HTMLOption | DropdownOption
+| BreadcrumbsOption
 
 export type Options = Option[][]
 @Component({

ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.html

@@ -0,0 +1,6 @@
+<div fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center">
+  <div *ngFor="let crumb of crumbs; index as i" fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center">
+    <eqm-icon *ngIf="i !== 0" name="triangle" [rotate]="90"></eqm-icon>
+    <eqm-label (click)="crumbClicked.emit({ crumb: crumb, index: index })">{{crumb}}</eqm-label>
+  </div>
+</div>

ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.scss

@@ -0,0 +1,16 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'eqm-breadcrumbs',
+  templateUrl: './breadcrumbs.component.html',
+  styleUrls: ['./breadcrumbs.component.scss']
+})
+export class BreadcrumbsComponent implements OnInit {
+  @Input() crumbs: string[]
+  @Output() crumbClicked = new EventEmitter<{ crumb: string, index: number }>()
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.ts

@@ -46,7 +46,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CarouselComponent, CarouselItemDirective, CarouselItemElement } from './components/carousel/carousel.component'
 import { QuestionComponent } from './components/question/question.component'
 import { ClickedOutsideDirective } from './directives/clicked-outside.directive'
-import { ScrollingModule } from '@angular/cdk/scrolling'
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component'
 
 @NgModule({
   imports: [
@@ -85,7 +86,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling'
     CarouselComponent,
     CarouselItemElement,
     CarouselItemDirective,
-    QuestionComponent
+    QuestionComponent,
+    BreadcrumbsComponent
   ],
   exports: [
     ClickedOutsideDirective,
@@ -112,7 +114,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling'
     CheckboxComponent,
     CarouselComponent,
     CarouselItemDirective,
-    QuestionComponent
+    QuestionComponent,
+    BreadcrumbsComponent
   ],
   providers: [
     UtilitiesService