Refactor Timelion expression suggestion logic for clarity. (#11285)

* Refactor Timelion expression suggestion logic for clarity.
- Create timelionExpressionInput directive.
- Create timelionExpressionSuggestions directive.
- Create expression_directive_helpers service.

src/core_plugins/timelion/public/app.less

@@ -24,6 +24,18 @@
   }
 }
 
+/**
+ * 1. Needs to be relative to contain absolutely-positioned typeahead suggestions.
+ */
+.timelionLocalSearch {
+  position: relative; /* 1 */
+}
+
+.timelionSearchInputContainer {
+  flex: 1 1 auto;
+  display: flex;
+}
+
 .timelion-container {
   margin: 20px;
 }
@@ -38,10 +50,6 @@
   background-color: @gray-lighter;
 }
 
-.timelion-expression {
-  position: relative !important;
-}
-
 .timelion-subnav {
   background-color: @gray-lighter;
   margin: 0px
@@ -88,33 +96,17 @@
   opacity: 0.50;
 }
 
-.timelion-interval {
-  width: 70px !important;
-  height: auto;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  padding: .5em;
-  padding-right: 1.5em;
-  line-height: 1;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 0;
-  border-radius: 0;
-  text-align: center;
-
-  &:focus {
-    border-color: #ecf0f1;
-  }
+.timelion-interval-custom {
+  width: 60px;
 }
 
-.timelion-interval--select {
-  background-position: right 50%;
-  background-repeat: no-repeat;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
+.timelion-interval-presets {
+  width: 90px;
 }
 
-.timelion-interval-other {
-  width: 10px !important;
+.timelion-interval-presets-compact {
+  width: 10px;
+  padding-left: 0;
 }
 
 timelion-interval {
@@ -214,10 +206,3 @@ timelion-interval {
   margin-right: 5px;
   font-weight: bold;
 }
-
-/**
- * 1. Needs to be relative to contain absolutely-positioned typeahead suggestions.
- */
-.timelionLocalSearch {
-  position: relative; /* 1 */
-}

src/core_plugins/timelion/public/directives/expression_directive.html

@@ -0,0 +1,23 @@
+<div class="timelionSearchInputContainer">
+  <input
+    id="timelionSearchInput"
+    input-focus
+    ng-model="sheet"
+    timelion-expression="{{sheet}}"
+    placeholder="Expression..."
+    aria-label="Expression input"
+    type="text"
+    class="kuiLocalSearchInput"
+    ng-keyup="keyUpHandler($event)"
+    ng-keydown="keyDownHandler($event)"
+    ng-mouseup="mouseUpHandler()"
+    ng-blur="blurHandler()"
+  >
+
+  <timelion-expression-suggestions
+    ng-show="functionSuggestions.isVisible"
+    suggestions="functionSuggestions.list"
+    selected-index="functionSuggestions.index"
+    on-click-suggestion="suggestionClickHandler"
+  ></timelion-expression-suggestions>
+</div>