import { BaseItem } from './base-item';
export class SliderItem extends BaseItem {
    constructor(id, title, min, max, step, defaultValue = null) {
        super(id, title);
        this.min = min;
        this.max = max;
        this.step = step;
        this.defaultValue = defaultValue;
    }
    getDOMNode() {
        this.container = document.createElement('div');
        this.label = document.createElement('label');
        this.label.textContent = this.title;
        this.label.setAttribute('for', `slider_${this.id}`);
        this.slider = document.createElement('input');
        this.slider.id = `slider_${this.id}`;
        this.slider.type = 'range';
        this.slider.setAttribute('min', this.min.toString());
        this.slider.setAttribute('max', this.max.toString());
        this.slider.setAttribute('step', this.step.toString());
        if (this.defaultValue)
            this.slider.value = this.defaultValue.toString();
        this.slider.addEventListener('change', this.onChange.bind(this));
        this.slider.addEventListener('focus', this.onFocus.bind(this));
        this.container.appendChild(this.label);
        this.container.appendChild(this.slider);
        this.container.addEventListener('focus', this.onFocus.bind(this));
        return this.container;
    }
    getContents() {
        return this.slider.value;
    }
    onChange(event) {
        this.emit('update', {
            type: 'slider',
            value: this.slider.value
        });
    }
    focus() {
        this.slider && this.slider.focus();
    }
}