blob: 1f4b89b4f0ef0959ae921e4e5982a34436a26450 [file] [log] [blame]
<link rel="import" href="../../third-party/polymer/polymer.html">
<link rel="import" href="../../third-party/core-list/core-list.html">
<link rel="import" href="../../third-party/core-item/core-item.html">
<polymer-element name="p2b-namespace-list" attributes="names selectable">
<template>
<link rel="stylesheet" href="component.css">
<core-list selectable?="{{selectable}}" on-core-activate="{{fireSelectEvent}}" data="{{_items}}" height="20" style="height: 200px">
<template>
<core-item class="{{ {selected: selected} | tokenList }}" label="{{model.name}}"></core-item>
</template>
</core-list>
</template>
<script>
Polymer('p2b-namespace-list', {
/*
* List of names to be displayed
* @type {Array<string>}
*/
names: [],
/*
* Whether the names displayed are selectable
* if selectable, 'select' event will fire with the name of the selected item
* @type {boolean}
*/
selectable: false,
/*
* transformed collection of names to objects
* @private
*/
_items: [],
namesChanged: function() {
// transform from [string] to [object] since core-items expects array of objects
this._items = this.names.map( function(n) {
return {name: n};
});
},
/*
* fires the select event pass the name as event argument
* @private
*/
fireSelectEvent: function(e) {
if (!this.selectable) {
return;
}
this.fire('select', e.detail.data.name);
}
});
</script>
</polymer-element>