Update components in preparation for 0.6.3 release

Author: Jan Miksovsky

basic-list-box.html

@@ -65,6 +65,14 @@
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
 
+    :host {
+      --basic-list-box: {
+        border: 1px solid gray;
+        box-sizing: border-box;
+        cursor: default;
+      };
+    }
+
     [target="child"] {
       display: -webkit-flex;
       display: flex;
@@ -81,13 +89,15 @@
 
     /* Generic appearance */
     :host([generic=""]) {
-      border: 1px solid gray;
-      box-sizing: border-box;
-      cursor: default;
+      @apply(--basic-list-box);
     }
 
     :host([generic=""]) #itemsContainer ::content > * {
+      cursor: default;
       padding: 0.25em;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
     }
     </style>
 
@@ -116,6 +126,10 @@
     Basic.SelectionScroll
   ],
 
+  // attributeChanged: function(name, type) {
+  //   console.log("changed", name);
+  // },
+
   behaviors: [
     Basic.Aspect,
     Basic.Generic
@@ -145,9 +159,34 @@
   },
 
   properties: {
+
+    selectedIndex: {
+      type: Number
+    },
+
+    selectedItem: {
+      type: Object
+    },
+
     target: {
       value: 'shadow'
     }
+
+  },
+
+  /**
+   * Ensures the selected item is visible. This normally happens by default.
+   * However, if the list box is hidden when the selection is changed, the
+   * auto-scrolling feature won't apply. In that situation, call this method
+   * after the list box becomes visible.
+   *
+   * @method scrollSelectedItemIntoView
+   */
+  scrollSelectedItemIntoView: function() {
+    var item = this.collective.selectedItem;
+    if (item) {
+      this.collective.scrollItemIntoView(item);
+    }
   },
 
   /**
@@ -158,7 +197,10 @@
    * @type Number
    */
   get selectedIndex() {
-    return this.collective.selectedIndex;
+    // See note at basic-item-selection's selectedIndex getter.
+    if (this._readied) {
+      return this.collective.selectedIndex;
+    }
   },
   set selectedIndex(index) {
     this.collective.selectedIndex = index;
@@ -211,6 +253,41 @@
    */
   selectPrevious: function() {
     return this.collective.selectPrevious();
+  },
+
+  /**
+   * The text content of the selected item.
+   *
+   * Setting this to text not found in any list item will set selectedItem to
+   * null.
+   *
+   * @property value
+   * @type String
+   */
+  get value() {
+    return this.selectedItem == null || this.selectedItem.textContent == null ?
+      '' :
+      this.selectedItem.textContent;
+  },
+  set value(text) {
+
+    var currentIndex = this.selectedIndex;
+    var newIndex = -1; // Assume we won't find the text.
+
+    // Find the item with the indicated text.
+    var items = this.items;
+    for (i = 0, length = items.length; i < length; i++) {
+      if (items[i].textContent === text) {
+        newIndex = i;
+        break;
+      }
+    }
+
+    if (newIndex !== currentIndex) {
+      this.selectedIndex = newIndex;
+      var event = new CustomEvent('value-changed');
+      this.dispatchEvent(event);
+    }
   }
 
 });

bower.json

@@ -1,28 +1,28 @@
 {
   "name": "basic-list-box",
   "description": "A single-selection list box that supports selection highlighting (using the system highlight color) and keyboard navigation.",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "license": "MIT",
   "main": "basic-list-box.html",
   "dependencies": {
-    "basic-accessible-list": "basic-web-components/basic-accessible-list#0.6.2",
-    "basic-aspect": "basic-web-components/basic-aspect#0.6.2",
-    "basic-children-content": "basic-web-components/basic-children-content#0.6.2",
-    "basic-content-items": "basic-web-components/basic-content-items#0.6.2",
-    "basic-direction-selection": "basic-web-components/basic-direction-selection#0.6.2",
-    "basic-item-selection": "basic-web-components/basic-item-selection#0.6.2",
-    "basic-keyboard": "basic-web-components/basic-keyboard#0.6.2",
-    "basic-keyboard-direction": "basic-web-components/basic-keyboard-direction#0.6.2",
-    "basic-keyboard-paging": "basic-web-components/basic-keyboard-paging#0.6.2",
-    "basic-keyboard-prefix-selection": "basic-web-components/basic-keyboard-prefix-selection#0.6.2",
-    "basic-selection-highlight": "basic-web-components/basic-selection-highlight#0.6.2",
-    "basic-selection-scroll": "basic-web-components/basic-selection-scroll#0.6.2",
-    "basic-tap-selection": "basic-web-components/basic-tap-selection#0.6.2",
-    "basic-shared": "basic-web-components/basic-shared#0.6.2",
+    "basic-accessible-list": "basic-web-components/basic-accessible-list#0.6.3",
+    "basic-aspect": "basic-web-components/basic-aspect#0.6.3",
+    "basic-children-content": "basic-web-components/basic-children-content#0.6.3",
+    "basic-content-items": "basic-web-components/basic-content-items#0.6.3",
+    "basic-direction-selection": "basic-web-components/basic-direction-selection#0.6.3",
+    "basic-item-selection": "basic-web-components/basic-item-selection#0.6.3",
+    "basic-keyboard": "basic-web-components/basic-keyboard#0.6.3",
+    "basic-keyboard-direction": "basic-web-components/basic-keyboard-direction#0.6.3",
+    "basic-keyboard-paging": "basic-web-components/basic-keyboard-paging#0.6.3",
+    "basic-keyboard-prefix-selection": "basic-web-components/basic-keyboard-prefix-selection#0.6.3",
+    "basic-selection-highlight": "basic-web-components/basic-selection-highlight#0.6.3",
+    "basic-selection-scroll": "basic-web-components/basic-selection-scroll#0.6.3",
+    "basic-tap-selection": "basic-web-components/basic-tap-selection#0.6.3",
+    "basic-shared": "basic-web-components/basic-shared#0.6.3",
     "polymer": "Polymer/polymer#^1.1"
   },
   "devDependencies": {
-    "basic-framed-content": "basic-web-components/basic-framed-content#0.6.2",
+    "basic-framed-content": "basic-web-components/basic-framed-content#0.6.3",
     "web-component-tester": "*"
   },
   "keywords": [