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"
}}
```

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;