<commit_before>import './range.scss';

var Template = require('./range.html');
var Interface = require('interface.json');
var Core = require('_core.js');

/**
 * Creates a Range
 *
 * @class
*/

class Range extends Core {

    constructor(options = {}){
        options.id = Math.floor(Math.random() * 100000, 5).toString();
        super(options);
        this._render(Template, options);

        this._findCurrentRangeValue = this._findCurrentRangeValue.bind(this);
    }

    _componentDidMount() {
      this._attachListener("input", '.hig__range__field', this.el, this._findCurrentRangeValue);
    }

    setInstructions(instructions) {
        if (instructions) {
            const instructionsEl = this._findOrAddElement('INSTRUCTIONS', 'p', '.hig__range__instructions');
            instructionsEl.textContent = instructions;
        } else {
            this._removeElementIfFound('.hig__range__instructions');
        }
    }

   setLabel(label) {
        if (label) {
            const labelEl = this._findOrAddElement('LABEL', 'label', '.hig__range__label');
            labelEl.textContent = label;
        } else {
            this._removeElementIfFound('.hig__range__label');
        }
    }

    setValue(value) {
        this._findDOMEl('.hig__range__field', this.el).setAttribute("value", value);
        this._findDOMEl('.hig__range__field__current-value', this.el).textContent = value;
    }

    setMax(maxValue){
        this._findDOMEl('.hig__range__field', this.el).setAttribute("max", maxValue);
        this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMax = maxValue;
    }

    setMin(minValue){
        this._findDOMEl('.hig__range__field', this.el).setAttribute("min", minValue);
        this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMin = minValue;
    }

    setStep(value) {
        this._findDOMEl('.hig__range__field', this.el).setAttribute("step", value);
    }

    onBlur(fn){
        return this._attachListener("focusout", '.hig__range__field', this.el, fn);
    }

    onChange(fn){
        this._attachListener("change", '.hig__range__field', this.el, fn);
    }

    onFocus(fn){
        return this._attachListener("focusin", '.hig__range__field', this.el, fn);
    }

    disable(){
        this._findDOMEl('.hig__range__field', this.el).setAttribute('disabled', true);
        this.el.classList.add('hig__range--disabled');
    }

    enable(){
        this._findDOMEl('.hig__range__field', this.el).removeAttribute('disabled');
        this.el.classList.remove('hig__range--disabled');
    }

    required(requiredLabelText){
        this.el.classList.add('hig__range--required');
        const requiredNoticeEl = this._findOrAddElement('REQUIRED-NOTICE', 'p', '.hig__range__required-notice');
        requiredNoticeEl.textContent = requiredLabelText;
    }

    noLongerRequired(){
        this.el.classList.remove('hig__range--required');
        this._removeElementIfFound('.hig__range__required-notice');
    }

    _findCurrentRangeValue(){
        const currentValue = this._findDOMEl('.hig__range__field', this.el).value;
        this._findDOMEl('.hig__range__field__current-value', this.el).textContent = currentValue;
    }
}

Range._interface = Interface['basics']['FormElements']['partials']['Range'];
Range._defaults = {
    value: null,
    minValue: 0,
    maxValue: null,
    instructions: '',
    label: '',
    step: 1<commit_msg>alpha order for Range.defaults, and actually return something for onChange function (bug)<commit_after>import './range.scss';

var Template = require('./range.html');
var Interface = require('interface.json');
var Core = require('_core.js');

/**
 * Creates a Range
 *
 * @class
*/

class Range extends Core {

    constructor(options = {}){
        options.id = Math.floor(Math.random() * 100000, 5).toString();
        super(options);
        this._render(Template, options);

        this._findCurrentRangeValue = this._findCurrentRangeValue.bind(this);
    }

    _componentDidMount() {
      this._attachListener("input", '.hig__range__field', this.el, this._findCurrentRangeValue);
    }

    setInstructions(instructions) {
        if (instructions) {
            const instructionsEl = this._findOrAddElement('INSTRUCTIONS', 'p', '.hig__range__instructions');
            instructionsEl.textContent = instructions;
        } else {
            this._removeElementIfFound('.hig__range__instructions');
        }
    }

   setLabel(label) {
        if (label) {
            const labelEl = this._findOrAddElement('LABEL', 'label', '.hig__range__label');
            labelEl.textContent = label;
        } else {
            this._removeElementIfFound('.hig__range__label');
        }
    }

    setValue(value) {
        this._findDOMEl('.hig__range__field', this.el).setAttribute("value", value);
        this._findDOMEl('.hig__range__field__current-value', this.el).textContent = value;
    }

    setMax(maxValue){
        this._findDOMEl('.hig__range__field', this.el).setAttribute("max", maxValue);
        this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMax = maxValue;
    }

    setMin(minValue){
        this._findDOMEl('.hig__range__field', this.el).setAttribute("min", minValue);
        this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMin = minValue;
    }

    setStep(value) {
        this._findDOMEl('.hig__range__field', this.el).setAttribute("step", value);
    }

    onBlur(fn){
        return this._attachListener("focusout", '.hig__range__field', this.el, fn);
    }

    onChange(fn){
        return this._attachListener("change", '.hig__range__field', this.el, fn);
    }

    onFocus(fn){
        return this._attachListener("focusin", '.hig__range__field', this.el, fn);
    }

    disable(){
        this._findDOMEl('.hig__range__field', this.el).setAttribute('disabled', true);
        this.el.classList.add('hig__range--disabled');
    }

    enable(){
        this._findDOMEl('.hig__range__field', this.el).removeAttribute('disabled');
        this.el.classList.remove('hig__range--disabled');
    }

    required(requiredLabelText){
        this.el.classList.add('hig__range--required');
        const requiredNoticeEl = this._findOrAddElement('REQUIRED-NOTICE', 'p', '.hig__range__required-notice');
        requiredNoticeEl.textContent = requiredLabelText;
    }

    noLongerRequired(){
        this.el.classList.remove('hig__range--required');
        this._removeElementIfFound('.hig__range__required-notice');
    }

    _findCurrentRangeValue(){
        const currentValue = this._findDOMEl('.hig__range__field', this.el).value;
        this._findDOMEl('.hig__range__field__current-value', this.el).textContent = currentValue;
    }
}

Range._interface = Interface['basics']['FormElements']['partials']['Range'];
Range._defaults = {
    instructions: '',
    label: '',
    minValue: 0,
    maxValue: null,
    step: 1,
    value: null
{'fraction_non_alphanumeric': 0.145621327218002, 'fraction_numerical': 0.0025799054034685394, 'mean_word_length': 3.2036144578313253, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3510149', 'n_tokens_mistral': 2146, 'n_tokens_neox': 2039, 'n_words': 295}