Clicking this button will increment the signal for the list by 2
Clicking this button will set new template vars
Clicking this button will set the size to 4, then last 3 select options should be removed
Clicking this button will set the size to 10, then last 3 more select options should be added
<div class="row">
<ch5-select id="direction_select" size="20" indexId="Index"
receiveStateSize="ch5_select_receive_signal_size"
receiveStateTemplateVars="ch5_select_receive_signal_tmpl_vars"
noneSelectedPrompt="Select">
<template>
<ch5-select-option>
<i class="fas fa-arrow-{{fa-icon}}"></i>
<span>{{description}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px">
Clicking this button will increment the signal for the list by 2
</p>
<p>
<ch5-button label="Update size" sendEventOnClick="trigCh5SelectSizeIncrement"></ch5-button>
</p>
<p style="margin-top: 24px">
Clicking this button will set new template vars
</p>
<p>
<ch5-button label="Update tmpl vars" sendEventOnClick="trigCh5SelectTmplVarsUpdate"></ch5-button>
</p>
</div>
<div class="row">
<strong>ch5-select: receiveStateSize will not rebuild existing options.</strong>
It will remove unneeded options if size received is less than options length or it will add missing options
if size received is bigger that options length
</div>
<div class="row">
<ch5-select id="direction_select" size="7" indexId="Index"
receiveStateSize="ch5_select_receive_signal_set_size_1"
noneSelectedPrompt="Select">
<template>
<ch5-select-option>
<span>{{description}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px">
Clicking this button will set the size to 4, then last 3 select options should be removed
</p>
<p>
<ch5-button label="Update size to 4" sendEventOnClick="trigCh5SelectSetSize_1"></ch5-button>
</p>
</div>
<div class="row">
<ch5-select id="direction_select" size="7" indexId="Index"
receiveStateSize="ch5_select_receive_signal_set_size_2"
noneSelectedPrompt="Select">
<template>
<ch5-select-option>
<span>{{description}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px">
Clicking this button will set the size to 10, then last 3 more select options should be added
</p>
<p>
<ch5-button label="Update size to 10" sendEventOnClick="trigCh5SelectSetSize_2"></ch5-button>
</p>
</div>
.row {
padding: 24px 0;
display: inline-block;
width: 100%;
}
.ch5-select .ch5-select__panel__item > * {
margin: 8px;
}