Skip to content

Commit be64b96

Browse files
gatanasogatanaso
authored
feature/enable custom renderer and custom item template (#52)
* enabled custom renderer - updated component to support custom renderers - removed existing renderer override and removed custom styles for setting selected state - udpated demos and tests * enabled custom item templates - updated component to support custom item templates - updated demos and tests
1 parent 1b81156 commit be64b96

File tree

6 files changed

+399
-301
lines changed

6 files changed

+399
-301
lines changed

‎demo/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,5 +294,87 @@ <h3>Multiselect-combo-box with `clear-button-visible`</h3>
294294
</template>
295295
</demo-snippet>
296296
</div>
297+
298+
<div class="vertical-section-container centered">
299+
<h3>Custom item template</h3>
300+
<demo-snippet>
301+
<template>
302+
303+
<multiselect-combo-box
304+
id="customItemTemplateDemo"
305+
label="Multiselect field"
306+
placeholder="Add"
307+
item-label-path="name"
308+
item-value-path="symbol">
309+
310+
<template>
311+
<b>[[item.name]], <sub>[[item.number]]</sub>[[item.symbol]]</b><br>
312+
array index: [[index]]
313+
</template>
314+
</multiselect-combo-box>
315+
316+
<script>
317+
window.addEventListener('WebComponentsReady', function() {
318+
const customItemTemplateMultiselectComboBox = document.querySelector('#customItemTemplateDemo');
319+
320+
customItemTemplateMultiselectComboBox.items = [
321+
{name: 'Hydrogen', symbol: 'H', number: 1},
322+
{name: 'Helium', symbol: 'He', number: 2},
323+
{name: 'Lithium', symbol: 'Li', number: 3},
324+
{name: 'Beryllium', symbol: 'Be', number: 4},
325+
{name: 'Boron', symbol: 'B', number: 5},
326+
{name: 'Carbon', symbol: 'C', number: 6},
327+
{name: 'Nitrogen', symbol: 'N', number: 7},
328+
{name: 'Oxygen', symbol: 'O', number: 8}
329+
];
330+
});
331+
</script>
332+
</template>
333+
</demo-snippet>
334+
</div>
335+
336+
<div class="vertical-section-container centered">
337+
<h3>Custom renderer</h3>
338+
<demo-snippet>
339+
<template>
340+
341+
<multiselect-combo-box
342+
id="customRendererDemo"
343+
label="Multiselect field"
344+
placeholder="Add"
345+
item-label-path="name"
346+
item-value-path="symbol">
347+
</multiselect-combo-box>
348+
349+
<script>
350+
window.addEventListener('WebComponentsReady', function() {
351+
const customRendererMultiselectComboBox = document.querySelector('#customRendererDemo');
352+
353+
customRendererMultiselectComboBox.items = [
354+
{name: 'Hydrogen', symbol: 'H', number: 1},
355+
{name: 'Helium', symbol: 'He', number: 2},
356+
{name: 'Lithium', symbol: 'Li', number: 3},
357+
{name: 'Beryllium', symbol: 'Be', number: 4},
358+
{name: 'Boron', symbol: 'B', number: 5},
359+
{name: 'Carbon', symbol: 'C', number: 6},
360+
{name: 'Nitrogen', symbol: 'N', number: 7},
361+
{name: 'Oxygen', symbol: 'O', number: 8}
362+
];
363+
364+
customRendererMultiselectComboBox.renderer = function(root, owner, model) {
365+
if (!root.firstElementChild) {
366+
root.innerHTML = '<b><span class="name"></span>, <sub class="number"></sub><span class="symbol"></span></b>'
367+
+ '<br> array index: <span class="index"></span>';
368+
}
369+
root.querySelector('.name').textContent = model.item.name;
370+
root.querySelector('.number').textContent = model.item.number;
371+
root.querySelector('.symbol').textContent = model.item.symbol;
372+
root.querySelector('.index').textContent = model.index;
373+
};
374+
});
375+
</script>
376+
</template>
377+
</demo-snippet>
378+
</div>
297379
</body>
298380
</html>

‎demo/material/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,5 +324,87 @@ <h3>Multiselect-combo-box with `clear-button-visible`</h3>
324324
</template>
325325
</demo-snippet>
326326
</div>
327+
328+
<div class="vertical-section-container centered">
329+
<h3>Custom item template</h3>
330+
<demo-snippet>
331+
<template>
332+
333+
<multiselect-combo-box
334+
id="customItemTemplateDemo"
335+
label="Multiselect field"
336+
placeholder="Add"
337+
item-label-path="name"
338+
item-value-path="symbol">
339+
340+
<template>
341+
<b>[[item.name]], <sub>[[item.number]]</sub>[[item.symbol]]</b><br>
342+
array index: [[index]]
343+
</template>
344+
</multiselect-combo-box>
345+
346+
<script>
347+
window.addEventListener('WebComponentsReady', function() {
348+
const customItemTemplateMultiselectComboBox = document.querySelector('#customItemTemplateDemo');
349+
350+
customItemTemplateMultiselectComboBox.items = [
351+
{name: 'Hydrogen', symbol: 'H', number: 1},
352+
{name: 'Helium', symbol: 'He', number: 2},
353+
{name: 'Lithium', symbol: 'Li', number: 3},
354+
{name: 'Beryllium', symbol: 'Be', number: 4},
355+
{name: 'Boron', symbol: 'B', number: 5},
356+
{name: 'Carbon', symbol: 'C', number: 6},
357+
{name: 'Nitrogen', symbol: 'N', number: 7},
358+
{name: 'Oxygen', symbol: 'O', number: 8}
359+
];
360+
});
361+
</script>
362+
</template>
363+
</demo-snippet>
364+
</div>
365+
366+
<div class="vertical-section-container centered">
367+
<h3>Custom renderer</h3>
368+
<demo-snippet>
369+
<template>
370+
371+
<multiselect-combo-box
372+
id="customRendererDemo"
373+
label="Multiselect field"
374+
placeholder="Add"
375+
item-label-path="name"
376+
item-value-path="symbol">
377+
</multiselect-combo-box>
378+
379+
<script>
380+
window.addEventListener('WebComponentsReady', function() {
381+
const customRendererMultiselectComboBox = document.querySelector('#customRendererDemo');
382+
383+
customRendererMultiselectComboBox.items = [
384+
{name: 'Hydrogen', symbol: 'H', number: 1},
385+
{name: 'Helium', symbol: 'He', number: 2},
386+
{name: 'Lithium', symbol: 'Li', number: 3},
387+
{name: 'Beryllium', symbol: 'Be', number: 4},
388+
{name: 'Boron', symbol: 'B', number: 5},
389+
{name: 'Carbon', symbol: 'C', number: 6},
390+
{name: 'Nitrogen', symbol: 'N', number: 7},
391+
{name: 'Oxygen', symbol: 'O', number: 8}
392+
];
393+
394+
customRendererMultiselectComboBox.renderer = function(root, owner, model) {
395+
if (!root.firstElementChild) {
396+
root.innerHTML = '<b><span class="name"></span>, <sub class="number"></sub><span class="symbol"></span></b>'
397+
+ '<br> array index: <span class="index"></span>';
398+
}
399+
root.querySelector('.name').textContent = model.item.name;
400+
root.querySelector('.number').textContent = model.item.number;
401+
root.querySelector('.symbol').textContent = model.item.symbol;
402+
root.querySelector('.index').textContent = model.index;
403+
};
404+
});
405+
</script>
406+
</template>
407+
</demo-snippet>
408+
</div>
327409
</body>
328410
</html>

0 commit comments

Comments
 (0)