FIX: allows to define label/title properties for display instead of name

Usage:

```
const content = [{foo: "FOO", bar: "BAR", value: 1, name: "foo-bar"}];

{{combo-box
  content=content
  value=value
  labelProperty="foo"
  titleProperty="bar"
}}
```

app/assets/javascripts/admin/templates/user-index.hbs

@@ -517,6 +517,7 @@
         {{admin-group-selector
           content=availableGroups
           value=customGroupIdsBuffer
+          labelProperty="name"
           onChange=(action (mut customGroupIdsBuffer))
         }}
       </div>

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

@@ -57,6 +57,8 @@ export default Component.extend(
     nameProperty: "name",
     singleSelect: false,
     multiSelect: false,
+    labelProperty: null,
+    titleProperty: null,
 
     init() {
       this._super(...arguments);
@@ -76,6 +78,8 @@ export default Component.extend(
           uniqueID: guidFor(this),
           valueProperty: this.valueProperty,
           nameProperty: this.nameProperty,
+          labelProperty: this.labelProperty,
+          titleProperty: this.titleProperty,
           options: EmberObject.create(),
 
           isLoading: false,

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js

@@ -38,13 +38,18 @@ export default Component.extend(UtilsMixin, {
     return this.getProperty(this.item, "ariaLabel") || this.title;
   }),
 
-  title: computed("item.title", "rowName", function() {
+  title: computed("rowTitle", "item.title", "rowName", function() {
-    return this.getProperty(this.item, "title") || this.rowName;
+    return (
+      this.rowTitle || this.getProperty(this.item, "title") || this.rowName
+    );
   }),
 
-  label: computed("item.label", "title", "rowName", function() {
+  label: computed("rowLabel", "item.label", "title", "rowName", function() {
     const label =
-      this.getProperty(this.item, "label") || this.title || this.rowName;
+      this.rowLabel ||
+      this.getProperty(this.item, "label") ||
+      this.title ||
+      this.rowName;
     if (
       this.selectKit.options.allowAny &&
       this.rowValue === this.selectKit.filter &&
@@ -61,7 +66,9 @@ export default Component.extend(UtilsMixin, {
 
     this.setProperties({
       rowName: this.getName(this.item),
-      rowValue: this.getValue(this.item)
+      rowValue: this.getValue(this.item),
+      rowLabel: this.getProperty(this.item, "labelProperty"),
+      rowTitle: this.getProperty(this.item, "titleProperty")
     });
   },
 

app/assets/javascripts/select-kit/addon/components/selected-name.js

@@ -22,6 +22,8 @@ export default Component.extend(UtilsMixin, {
 
     // we can't listen on `item.nameProperty` given it's variable
     this.setProperties({
+      headerLabel: this.getProperty(this.item, "labelProperty"),
+      headerTitle: this.getProperty(this.item, "titleProperty"),
       name: this.getName(this.item),
       value:
         this.item === this.selectKit.noneItem ? null : this.getValue(this.item)
@@ -38,12 +40,22 @@ export default Component.extend(UtilsMixin, {
     return String(this.title).replace("…", "");
   }),
 
-  title: computed("item", function() {
+  title: computed("headerTitle", "item", function() {
-    return this._safeProperty("title", this.item) || this.name || "";
+    return (
+      this.headerTitle ||
+      this._safeProperty("title", this.item) ||
+      this.name ||
+      ""
+    );
   }),
 
-  label: computed("title", "name", function() {
+  label: computed("headerLabel", "title", "name", function() {
-    return this._safeProperty("label", this.item) || this.title || this.name;
+    return (
+      this.headerLabel ||
+      this._safeProperty("label", this.item) ||
+      this.title ||
+      this.name
+    );
   }),
 
   icons: computed("item.{icon,icons}", function() {

test/javascripts/components/select-kit/single-select-test.js

@@ -296,3 +296,45 @@ componentTest("focusAfterOnChange", {
     );
   }
 });
+
+componentTest("labelProperty", {
+  template: '{{single-select labelProperty="foo" value=value content=content}}',
+
+  beforeEach() {
+    this.setProperties({
+      content: [{ id: 1, name: "john", foo: "JACKSON" }],
+      value: 1
+    });
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().label(), "JACKSON");
+
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(1);
+
+    assert.equal(row.label(), "JACKSON");
+  }
+});
+
+componentTest("titleProperty", {
+  template: '{{single-select titleProperty="foo" value=value content=content}}',
+
+  beforeEach() {
+    this.setProperties({
+      content: [{ id: 1, name: "john", foo: "JACKSON" }],
+      value: 1
+    });
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().title(), "JACKSON");
+
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(1);
+
+    assert.equal(row.title(), "JACKSON");
+  }
+});

test/javascripts/helpers/select-kit-helper.js

@@ -95,6 +95,12 @@ function rowHelper(row) {
     title() {
       return row.attr("title");
     },
+    label() {
+      return row
+        .find(".name")
+        .text()
+        .trim();
+    },
     value() {
       const value = row.attr("data-value");
       return isEmpty(value) ? null : value;
@@ -124,7 +130,7 @@ function headerHelper(header) {
       return header.find(".d-icon");
     },
     title() {
-      return header.attr("title");
+      return header.find(".selected-name").attr("title");
     },
     el() {
       return header;