<e-colorinput id="example-colorpicker-trigger" value readonly></e-colorinput>
<e-colorpicker id="example-colorpicker" key="example-colorpicker"></e-colorpicker>
<script>
var pickerTriggerElement = document.querySelector('#example-colorpicker-trigger');var pickerElement = document.querySelector('#example-colorpicker');var lastValue = "";pickerTriggerElement.addEventListener('click', function(event) {if (pickerElement.isOpened) {pickerElement.close();} else {pickerElement.open(pickerTriggerElement, pickerTriggerElement.value);}});pickerElement.addEventListener('apply', function(event) {lastValue = event.detail.value;pickerTriggerElement.value = event.detail.value;});pickerElement.addEventListener('change', function(event) {pickerTriggerElement.value = event.detail.value;});pickerElement.addEventListener('cancel', function(event) {pickerTriggerElement.value = lastValue;});
</script>
<e-colorinput id="example-colorpicker-trigger" value="" readonly></e-colorinput><e-colorpicker id="example-colorpicker" key="example-colorpicker"></e-colorpicker><script>var pickerTriggerElement = document.querySelector('#example-colorpicker-trigger');
var pickerElement = document.querySelector('#example-colorpicker');
var lastValue = "";
pickerTriggerElement.addEventListener('click', function(event) {
if (pickerElement.isOpened) {
pickerElement.close();
} else {
pickerElement.open(pickerTriggerElement, pickerTriggerElement.value);
}
});
pickerElement.addEventListener('apply', function(event) {
lastValue = event.detail.value;
pickerTriggerElement.value = event.detail.value;
});
pickerElement.addEventListener('change', function(event) {
pickerTriggerElement.value = event.detail.value;
});
pickerElement.addEventListener('cancel', function(event) {
pickerTriggerElement.value = lastValue;
});
</script>