-
Notifications
You must be signed in to change notification settings - Fork 88
/
vaadin-combo-box-item.html
143 lines (128 loc) · 4.16 KB
/
vaadin-combo-box-item.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->
<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
<dom-module id="vaadin-combo-box-item">
<template>
<style>
:host {
display: block;
}
:host([hidden]) {
display: none;
}
</style>
<div part="content" id="content"></div>
</template>
</dom-module>
<script>
(function() {
/**
* The default element used for items in the vaadin-combo-box.
*
* ### Styling
*
* The following shadow DOM parts are available for styling:
*
* Part name | Description
* ---|---
* `content` | The element that wraps the item label or template content
*
* The following state attributes are exposed for styling:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `selected` | Set when the item is selected | :host
* `focused` | Set when the item is focused | :host
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @memberof Vaadin
* @mixes Vaadin.ThemableMixin
* @private
*/
class ComboBoxItemElement extends Vaadin.ThemableMixin(Polymer.Element) {
static get is() {
return 'vaadin-combo-box-item';
}
static get properties() {
return {
/**
* The index of the item
*/
index: Number,
/**
* The item to render
* @type {(String|Object)}
*/
item: Object,
/**
* The text label corresponding to the item
*/
label: String,
/**
* True when item is selected
*/
selected: {
type: Boolean,
value: false,
reflectToAttribute: true
},
/**
* True when item is focused
*/
focused: {
type: Boolean,
value: false,
reflectToAttribute: true
},
/**
* The template instance corresponding to the item
*/
_itemTemplateInstance: Object
};
}
static get observers() {
return [
'_updateLabel(label, _itemTemplateInstance)',
'_updateTemplateInstanceVariable("index", index, _itemTemplateInstance)',
'_updateTemplateInstanceVariable("item", item, _itemTemplateInstance)',
'_updateTemplateInstanceVariable("selected", selected, _itemTemplateInstance)',
'_updateTemplateInstanceVariable("focused", focused, _itemTemplateInstance)'
];
}
connectedCallback() {
super.connectedCallback();
if (!this._itemTemplateInstance) {
// 2.0 has __dataHost. Might want to consider assigning combobox reference directly to item.
const overlay = this.getRootNode().host.getRootNode().host;
const dropdown = overlay.__dataHost;
const comboBoxOverlay = dropdown.getRootNode().host;
const comboBox = comboBoxOverlay.getRootNode().host;
comboBox._ensureTemplatized();
if (comboBox._TemplateClass) {
this._itemTemplateInstance = new comboBox._TemplateClass({});
this.$.content.textContent = '';
this.$.content.appendChild(this._itemTemplateInstance.root);
}
}
}
_updateLabel(label, _itemTemplateInstance) {
if (_itemTemplateInstance === undefined && this.$.content) {
// Only set label to textContent no template
this.$.content.textContent = label;
}
}
_updateTemplateInstanceVariable(variable, value, _itemTemplateInstance) {
if (variable === undefined || value === undefined || _itemTemplateInstance === undefined) {
return;
}
_itemTemplateInstance[variable] = value;
}
}
customElements.define(ComboBoxItemElement.is, ComboBoxItemElement);
})();
</script>