rwk(*): put component css agnostic

Author: HollyPony

src/auto-complete.component.js

@@ -1,5 +1,4 @@
 import {MAX_SAFE_INTEGER} from './input-tags.constants';
-import AutoCompleteComponent from './auto-complete.component';
 import './input-tags.style.scss';
 
 /**
@@ -11,8 +10,13 @@ import './input-tags.style.scss';
  * Renders an input box with tag editing support.
  */
 class InputTags {
+  constructor($element) {
+    this.$element = $element;
+  }
+
   $onInit() {
     this.autocompleteVisible = false;
+    this.element = this.$element[0];
 
     this.tags = this.tags || [];
     this.suggestions = this.suggestions || {};
@@ -22,6 +26,8 @@ class InputTags {
     this.spellcheck = this.spellcheck || true;
     this.maxLength = this.maxLength || MAX_SAFE_INTEGER;
     this.inputDebounce = this.inputDebounce || 125;
+
+    this.reset();
   }
 
   track(tag) {
@@ -85,8 +91,30 @@ class InputTags {
     this.autocompleteVisible = true;
   }
 
-  triggerBlur() {
-    this.autocompleteVisible = false;
+  triggerBlur(e) {
+    if (e && this.element.contains(e.explicitOriginalTarget.parentNode)) {
+      this.$element.find('input')[0].focus();
+    } else {
+      this.autocompleteVisible = false;
+      this.reset();
+    }
+  }
+
+  reset() {
+    this.currentItem = this.suggestions;
+    this.path = [];
+  }
+
+  next(item) {
+    this.currentItem = item;
+    this.path.push(item);
+  }
+
+  previous() {
+    this.path.pop();
+    this.currentItem = this.path.length > 0 ?
+      this.path[this.path.length - 1] :
+      this.suggestions;
   }
 }
 
@@ -114,6 +142,7 @@ const InputTagsComponent = {
   }
 };
 
+InputTagsComponent.$inject = ['$element'];
+
 angular.module('angularjs-input-tags', [])
-  .component('inputTags', InputTagsComponent)
-  .component('inputTagsAutoComplete', AutoCompleteComponent);
+  .component('inputTags', InputTagsComponent);

src/auto-complete.template.html

@@ -1,15 +1,9 @@
 input-tags {
-  .host {
-    width: 100%;
-    outline: none;
-    user-select:none;
+  .ait-tag {
+    display: inline-block;
   }
 
-  .input-group-addon {
-    border-right: 0;
-  }
-
-  .display {
-    display: block;
+  .ait-dropdown {
+    position: absolute;
   }
 }

src/input-tags.component.js

@@ -1,32 +1,46 @@
-<div class="host input-group"
-     tabindex="-1"
-     data-ng-blur="$ctrl.triggerBlur($event)"
-     data-ng-focus="$ctrl.triggerFocus($event)">
-  <div class="input-group-addon"
-       data-ng-repeat="tag in $ctrl.tags track by $ctrl.track(tag)">
-    <span class="tag-text" data-ng-bind="::$ctrl.getTagText(tag)"></span>
-    <span style="cursor: pointer" ng-click="$ctrl.removeTag(tag)">
-      &nbsp;&#x274c;
+<label class="ait-label">
+  <ul class="ait-dropdown"
+      ng-if="$ctrl.maxLength > $ctrl.tags.length"
+      ng-show="$ctrl.autocompleteVisible">
+    <li class="ait-dropdown--title"
+        ng-if="$ctrl.path.length > 0"
+        ng-click="$ctrl.previous()"
+        ng-bind="$ctrl.currentItem[$ctrl.displayProperty] + '&lt;&nbsp;'">
+    </li>
+    <li class="ait-dropdown--title"
+        ng-if="$ctrl.path.length === 0"
+        ng-bind="$ctrl.currentItem[$ctrl.displayProperty]">
+    </li>
+    <li class="ait-dropdown--item"
+        ng-repeat="item in $ctrl.currentItem.data track by item.code"
+        ng-click="item.data && item.data.length > 0 ? $ctrl.next(item) : $ctrl.addTag(item)"
+        ng-bind="item[$ctrl.displayProperty] + (item.data && item.data.length > 0 && '&nbsp;&gt;')">
+    </li>
+  </ul>
+
+  <div class="ait-tag"
+       ng-repeat="tag in $ctrl.tags track by $ctrl.track(tag)">
+    <span class="ait-tag--text"
+          ng-bind="::$ctrl.getTagText(tag)"></span>
+    <span class="ait-tag--close"
+          style="cursor: pointer"
+          ng-click="$ctrl.removeTag(tag)">
     </span>
   </div>
 
-  <input-tags-auto-complete source="$ctrl.suggestions"
-                            ng-if="$ctrl.maxLength > $ctrl.tags.length"
-                            display-property="$ctrl.displayProperty"
-                            on-tag-add="$ctrl.addTag(tag)"
-                            visible="$ctrl.autocompleteVisible"></input-tags-auto-complete>
-
-  <input class="form-control"
+  <input class="ait-input"
+         type="text"
          autocomplete="off"
-         data-ng-trim="false"
+         ng-trim="false"
          tabindex="{{$ctrl.tabindex}}"
          placeholder="{{$ctrl.placeholder}}"
          spellcheck="{{$ctrl.spellcheck}}"
-         data-ng-if="$ctrl.maxLength > $ctrl.tags.length"
-         data-ng-model="$ctrl.inputSearch"
+         tabindex="-1"
+         ng-focus="$ctrl.triggerFocus($event)"
+         ng-blur="$ctrl.triggerBlur($event)"
+         ng-if="$ctrl.maxLength > $ctrl.tags.length"
+         ng-model="$ctrl.inputSearch"
          ng-model-options="{ debounce: $ctrl.inputDebounce }"
-         data-ng-change="$ctrl.inputChange()"
-         data-ng-disabled="$ctrl.disabled"
-         data-ng-focus="$ctrl.triggerFocus($event)"
-         data-ng-blur="$ctrl.triggerBlur($event)">
-</div>
+         ng-change="$ctrl.inputChange()"
+         ng-disabled="$ctrl.disabled" />
+</label>