Introduces select-kit

* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:

```
computeValue()
computeContent()
mutateValue()
```

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -0,0 +1,239 @@
+const { isNone, run, makeArray } = Ember;
+import computed from "ember-addons/ember-computed-decorators";
+import UtilsMixin from "select-kit/mixins/utils";
+import DomHelpersMixin from "select-kit/mixins/dom-helpers";
+import EventsMixin from "select-kit/mixins/events";
+import PluginApiMixin from "select-kit/mixins/plugin-api";
+import { applyContentPluginApiCallbacks } from "select-kit/mixins/plugin-api";
+
+export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixin, EventsMixin, {
+  pluginApiIdentifiers: ["select-kit"],
+  layoutName: "select-kit/templates/components/select-kit",
+  classNames: ["select-kit", "select-box-kit"],
+  classNameBindings: [
+    "isFocused",
+    "isExpanded",
+    "isDisabled",
+    "isHidden",
+    "isAbove",
+    "isBelow",
+    "isLeftAligned",
+    "isRightAligned"
+  ],
+  isDisabled: false,
+  isExpanded: false,
+  isFocused: false,
+  isHidden: false,
+  renderedBodyOnce: false,
+  renderedFilterOnce: false,
+  tabindex: 0,
+  scrollableParentSelector: ".modal-body",
+  none: null,
+  highlightedValue: null,
+  noContentLabel: "select_kit.no_content",
+  valueAttribute: "id",
+  nameProperty: "name",
+  autoFilterable: false,
+  filterable: false,
+  filter: "",
+  filterPlaceholder: "select_kit.filter_placeholder",
+  filterIcon: "search",
+  headerIcon: null,
+  rowComponent: "select-kit/select-kit-row",
+  rowComponentOptions: null,
+  noneRowComponent: "select-kit/select-kit-none-row",
+  createRowComponent: "select-kit/select-kit-create-row",
+  filterComponent: "select-kit/select-kit-filter",
+  headerComponent: "select-kit/select-kit-header",
+  headerComponentOptions: null,
+  headerComputedContent: null,
+  collectionComponent: "select-kit/select-kit-collection",
+  collectionHeight: 200,
+  verticalOffset: 0,
+  horizontalOffset: 0,
+  fullWidthOnMobile: false,
+  castInteger: false,
+  allowAny: false,
+  allowInitialValueMutation: false,
+  content: null,
+  computedContent: null,
+  limitMatches: 100,
+
+  init() {
+    this._super();
+
+    this.noneValue = "__none__";
+    this._previousScrollParentOverflow = "auto";
+    this._previousCSSContext = {};
+    this.set("headerComponentOptions", Ember.Object.create());
+    this.set("rowComponentOptions", Ember.Object.create());
+    this.set("computedContent", []);
+
+    if ($(window).outerWidth(false) <= 420) {
+      this.setProperties({ filterable: false, autoFilterable: false });
+    }
+  },
+
+  willComputeAttributes() {},
+  didComputeAttributes() {},
+
+  _beforeWillComputeContent(content) { return makeArray(content); },
+  willComputeContent(content) { return content; },
+  computeContent(content) { return content; },
+  _beforeDidComputeContent(content) {
+    content = applyContentPluginApiCallbacks(this.get("pluginApiIdentifiers"), content);
+
+    const existingCreatedComputedContent = this.get("computedContent").filterBy("created", true);
+    this.setProperties({
+      computedContent: content.map(c => this.computeContentItem(c)).concat(existingCreatedComputedContent)
+    });
+    return content;
+  },
+  didComputeContent() {},
+
+  mutateAttributes() {
+    run.next(() => {
+      this.mutateContent(this.get("computedContent"));
+      this.mutateValue(this.get("computedValue"));
+      this.set("headerComputedContent", this.computeHeaderContent());
+    });
+  },
+  mutateContent() {},
+  mutateValue(computedValue) { this.set("value", computedValue); },
+
+  computeHeaderContent() {
+    return this.baseHeaderComputedContent();
+  },
+
+  computeContentItem(contentItem, options) {
+    return this.baseComputedContentItem(contentItem, options);
+  },
+
+  baseComputedContentItem(contentItem, options) {
+    let originalContent;
+    options = options || {};
+    const name = options.name;
+
+    if (typeof contentItem === "string" || typeof contentItem === "number") {
+      originalContent = {};
+      originalContent[this.get("valueAttribute")] = contentItem;
+      originalContent[this.get("nameProperty")] = name || contentItem;
+    } else {
+      originalContent = contentItem;
+    }
+
+    return {
+      value: this._castInteger(this.valueForContentItem(contentItem)),
+      name: name || this._nameForContent(contentItem),
+      locked: false,
+      created: options.created || false,
+      originalContent
+    };
+  },
+
+  @computed("shouldFilter", "allowAny", "filter")
+  shouldDisplayFilter(shouldFilter, allowAny, filter) {
+    if (shouldFilter === true) return true;
+    if (allowAny === true && filter.length > 0) return true;
+    return false;
+  },
+
+  @computed("filter", "filteredComputedContent.[]")
+  shouldDisplayNoContentRow(filter, filteredComputedContent) {
+    return filter.length > 0 && filteredComputedContent.length === 0;
+  },
+
+  @computed("filter", "filterable", "autoFilterable", "renderedFilterOnce")
+  shouldFilter(filter, filterable, autoFilterable, renderedFilterOnce) {
+    if (renderedFilterOnce === true && filterable === true) return true;
+    if (filterable === true) return true;
+    if (autoFilterable === true && filter.length > 0) return true;
+    return false;
+  },
+
+  @computed("filter", "computedContent")
+  shouldDisplayCreateRow(filter, computedContent) {
+    if (computedContent.map(c => c.value).includes(filter)) return false;
+    if (this.get("allowAny") === true && filter.length > 0) return true;
+    return false;
+  },
+
+  @computed("filter", "shouldDisplayCreateRow")
+  createRowComputedContent(filter, shouldDisplayCreateRow) {
+    if (shouldDisplayCreateRow === true) {
+      let content = this.createContentFromInput(filter);
+      return this.computeContentItem(content, { created: true });
+    }
+  },
+
+  @computed
+  templateForRow() { return () => null; },
+
+  @computed
+  templateForNoneRow() { return () => null; },
+
+  @computed("filter")
+  templateForCreateRow() {
+    return (rowComponent) => {
+      return I18n.t("select_box.create", {
+        content: rowComponent.get("computedContent.name")
+      });
+    };
+  },
+
+  @computed("none")
+  noneRowComputedContent(none) {
+    if (isNone(none)) { return null; }
+
+    switch (typeof none) {
+    case "string":
+      return this.computeContentItem(this.noneValue, { name: I18n.t(none) });
+    default:
+      return this.computeContentItem(none);
+    }
+  },
+
+  createContentFromInput(input) { return input; },
+
+  willSelect() {
+    this.clearFilter();
+    this.set("highlightedValue", null);
+  },
+  didSelect() {
+    this.collapse();
+    this.focus();
+  },
+
+  willDeselect() {
+    this.clearFilter();
+    this.set("highlightedValue", null);
+  },
+  didDeselect() {
+    this.collapse();
+    this.focus();
+  },
+
+  clearFilter() {
+    this.$filterInput().val("");
+    this.setProperties({ filter: "" });
+  },
+
+  actions: {
+    onToggle() {
+      this.get("isExpanded") === true ? this.collapse() : this.expand();
+    },
+
+    onHighlight(rowComputedContent) {
+      this.set("highlightedValue", rowComputedContent.value);
+    },
+
+    onFilter(filter) {
+      this.setProperties({
+        highlightedValue: null,
+        renderedFilterOnce: true,
+        filter
+      });
+      this.autoHighlight();
+    }
+  }
+});