fix color-picker to not throw errors or lose its value

it clearly need more love ;)
This commit is contained in:
ralf 2022-02-23 10:38:31 +02:00
parent 354d15ba57
commit c9f6c98a5d

View File

@ -17,7 +17,7 @@ import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput)))
{
private cleared : boolean = true;
private readonly cleared_value = '#FEFEFE'; // as input type=color interprets everything not a "#rrggbb" string as black, we use this for no value selected for now
static get styles()
{
@ -28,6 +28,7 @@ export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput
display: flex;
}
.input-group__suffix{
width: 12px;
height: 12px;
}
.input-group__container {
@ -90,7 +91,7 @@ export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput
_inputTemplate()
{
return html`
<input type="color" onchange="${this._handleChange}"/>
<input type="color" .value="${this.value || this.cleared_value}" onchange="${this._handleChange}"/>
`;
}
@ -131,21 +132,20 @@ export class Et2Colorpicker extends Et2InputWidget(Et2Widget(SlotMixin(LionInput
getValue()
{
let value = this._inputNode.value;
if (this.cleared || value === '#FFFFFF' || value === '#ffffff') {
if (this.value.toUpperCase() === this.cleared_value)
{
return '';
}
return value;
return this.value;
}
set_value(color)
{
if(!color)
if (!color)
{
color = '';
color = this.cleared_value;
}
this.cleared = !color;
this._inputNode.value = color;
this.value = color;
}
}
customElements.define('et2-colorpicker', Et2Colorpicker);