Allow CommandBar items (and far items) to specify how they should be renderered

Author: Ben Grynhaus

apps/demo/src/app/app.component.html

@@ -17,18 +17,29 @@ <h2>Getting up and running...</h2>
 
 <div style="height: 500vh">
 
-  <!-- <fab-tag-picker [resolveSuggestions]="tagPicker.resolveSuggestions" [getTextFromItem]="tagPicker.getTextFromItem" [pickerSuggestionsOptions]="tagPicker.pickerSuggestionsOptions"
-    [itemLimit]="2">
-  </fab-tag-picker> -->
-
-  <fab-fabric>
-    <fab-tag-picker [resolveSuggestions]="getList" [emptyInputFocus]="getList" [getTextFromItem]="getTextFromItem" [pickerSuggestionsOptions]="{
-          suggestionsHeaderText: 'Suggested Tags',
-          noResultsFoundText: 'No Color Tags Found'
-      }" [itemLimit]="2"></fab-tag-picker>
-  </fab-fabric>
-
-  <fab-search-box
-    placeholder="Search">
-  </fab-search-box>
+  <fab-command-bar #commandBar [items]="commandBarItems" [farItems]="commandBarFarItems">
+  </fab-command-bar>
+
+  <fab-default-button (onClick)="toggleRun()" text="Toggle run"></fab-default-button>
+
+  <fab-panel [isOpen]="isPanelOpen" (onDismiss)="isPanelOpen = false">
+  </fab-panel>
+
+  <ng-template #customRange let-item="item">
+      <div>
+        Data: {{ item.data | json }}
+      </div>
+
+      <div>
+        <span>From: </span>
+        <input type="date" />
+      </div>
+
+      <div>
+        <span>To: </span>
+        <input type="date" />
+      </div>
+
+      <fab-default-button text="Done" (onClick)="item.onClick()"></fab-default-button>
+  </ng-template>
 </div>