Updated css to enable non form based select options, added base work for non form select

src/app/omni-search-box/omni-search-box.component.html

@@ -24,6 +24,16 @@
 
     <div>selectedOption:{{selectedOption}}</div>
 
+***
+      <div>
+        <div class="dropdown__menu -is-open">
+
+            <li *ngFor="let optionSetting of searchConfig" (click)="selectedClickHandler($event, optionSetting.mode.title)" >
+              <a [class.selected] = "selectedOption === optionSetting.mode.title">{{optionSetting.mode.title}}</a>
+              </li>
+
+        </div>
+      </div>
     </div>
     <div>
       <label for="modifierSelect" >Modifier</label>
@@ -33,6 +43,16 @@
         </option>
       </select>
       <div>selectedModifier:{{selectedModifier}}</div>
+***
+      <div>
+        <div class="dropdown__menu -is-open">
+
+          <li *ngFor="let modifierSetting of currentModifierList" (click)="modifiedClickHandler($event, modifierSetting.title)">
+            <a [class.selected] = "selectedModifier === modifierSetting.title">{{modifierSetting.title}}</a>
+          </li>
+
+        </div>
+      </div>
     </div>
 
     <div>

src/app/omni-search-box/omni-search-box.component.ts

@@ -142,4 +142,25 @@ export class OmniSearchBoxComponent implements OnInit {
     }
 
   }
+
+  selectedClickHandler(ev: MouseEvent, title: string) {
+
+    ev.stopImmediatePropagation();
+    console.log('selectedClickHandler', title);
+    console.log('selectedClickHandler', ev);
+
+    this.selectedOption = title;
+
+    this.updateModeSelection();
+  }
+  modifiedClickHandler(ev: MouseEvent, title: string) {
+
+    ev.stopImmediatePropagation();
+    console.log('selectedClickHandler', title);
+    console.log('selectedClickHandler', ev);
+
+    this.selectedModifier = title;
+
+    this.updateModifierSelection();
+  }
 }