Update umb-mini-search component (#8566)

umbraco · Aug 31, 2020 · 6ff100a · 6ff100a
1 parent 6f5806c
commit 6ff100a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/...mb-mini-search/umbminisearch.component.js → ...ves/components/umbminisearch.component.js b/...mb-mini-search/umbminisearch.component.js → ...ves/components/umbminisearch.component.js
@@ -4,7 +4,7 @@
     angular
         .module('umbraco')
         .component('umbMiniSearch', {
-            templateUrl: 'views/components/umb-mini-search/umb-mini-search.html',
+            templateUrl: 'views/components/umb-mini-search.html',
             controller: UmbMiniSearchController,
             controllerAs: 'vm',
             bindings: {
@@ -18,6 +18,9 @@
     function UmbMiniSearchController($scope) {
 
         var vm = this;
+
+        vm.onKeyDown = onKeyDown;
+        vm.onChange = onChange;
 
         var searchDelay = _.debounce(function () {
             $scope.$apply(function () {
@@ -27,23 +30,23 @@
             });
         }, 500);
 
-        vm.onKeyDown = function (ev) {
+        function onKeyDown(evt) {
             //13: enter
-            switch (ev.keyCode) {
+            switch (evt.keyCode) {
                 case 13:
                     if (vm.onSearch) {
                         vm.onSearch();
                     }
                     break;
             }
-        };
+        }
 
-        vm.onChange = function () {
+        function onChange() {
             if (vm.onStartTyping) {
                 vm.onStartTyping();
             }
             searchDelay();
-        };
+        }
 
     }
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search.html
@@ -0,0 +1,14 @@
+<ng-form class="umb-mini-search" ng-class="{'--has-value': vm.model !== null && vm.model !== ''}" novalidate>
+    <i class="icon icon-search" aria-hidden="true"></i>
+    <input type="text"
+           class="form-control search-input"
+           localize="placeholder,label"
+           label="@general_typeToSearch"
+           placeholder="@general_typeToSearch"
+           ng-model="vm.model"
+           ng-change="vm.onChange()"
+           ng-keydown="vm.onKeyDown($event)"
+           ng-blur="vm.onBlur($event)"
+           prevent-enter-submit
+           no-dirty-check>
+</ng-form>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html