<commit_before>import { RefSelector } from "./componentAnnotations";
import { AgInputRange } from "./agInputRange";
import { AgLabel, LabelAlignment } from "./agLabel";
import { AgInputNumberField } from "./agInputNumberField";
import { _ } from "../utils";

export class AgSlider extends AgLabel {
    private static TEMPLATE =
        `<div class="ag-slider">
            <label ref="eLabel"></label>
            <div class="ag-wrapper">
                <ag-input-range ref="eSlider"></ag-input-range>
                <ag-input-number-field ref="eText"></ag-input-number-field>
            </div>
        </div>`;

    @RefSelector('eLabel') protected eLabel: HTMLElement;
    @RefSelector('eSlider') private eSlider: AgInputRange;
    @RefSelector('eText') private eText: AgInputNumberField;

    protected labelAlignment: LabelAlignment = 'top';

    constructor() {
        super(AgSlider.TEMPLATE);
    }

    public onInputChange(callbackFn: (newValue: number) => void) {
        this.addDestroyableEventListener(this.eText.getInputElement(), 'input', () => {
            const textValue = parseInt(this.eText.getValue(), 10);
            this.eSlider.setValue(textValue.toString());
            callbackFn(textValue);
        });

        const sliderEvent = _.isBrowserIE() ? 'change' : 'input';
        this.addDestroyableEventListener(this.eSlider.getInputElement(), sliderEvent , () => {
            const sliderValue = this.eSlider.getValue();
            this.eText.setValue(sliderValue);
            callbackFn(parseFloat(sliderValue));
        });

        return this;
    }

    public setSliderWidth(width: number): this {
        this.eSlider.setWidth(width);
        return this;
    }

    public setTextFieldWidth(width: number): this {
        this.eText.setWidth(width);
        return this;
    }

    public setValue(value: string): this {
        if (this.eText.getValue() === value) {
            return this;
        }

        this.eText.setValue(value);
        this.eSlider.setValue(value);

        return this;
    }

    public setMaxValue(maxValue: number): this {
        this.eSlider.setMaxValue(maxValue);
        return this;
    }

    public getValue(): string {
        return this.eText.getValue();
    }
}<commit_msg>AG-3067 - agSlider should keep range and number field maxValue in sync<commit_after>import { RefSelector } from "./componentAnnotations";
import { AgInputRange } from "./agInputRange";
import { AgLabel, LabelAlignment } from "./agLabel";
import { AgInputNumberField } from "./agInputNumberField";
import { _ } from "../utils";

export class AgSlider extends AgLabel {
    private static TEMPLATE =
        `<div class="ag-slider">
            <label ref="eLabel"></label>
            <div class="ag-wrapper">
                <ag-input-range ref="eSlider"></ag-input-range>
                <ag-input-number-field ref="eText"></ag-input-number-field>
            </div>
        </div>`;

    @RefSelector('eLabel') protected eLabel: HTMLElement;
    @RefSelector('eSlider') private eSlider: AgInputRange;
    @RefSelector('eText') private eText: AgInputNumberField;

    protected labelAlignment: LabelAlignment = 'top';

    constructor() {
        super(AgSlider.TEMPLATE);
    }

    postConstruct() {
        super.postConstruct();
        this.setMinValue(0);
    }

    public onInputChange(callbackFn: (newValue: number) => void) {
        this.addDestroyableEventListener(this.eText.getInputElement(), 'input', () => {
            const textValue = parseInt(this.eText.getValue(), 10);
            this.eSlider.setValue(textValue.toString());
            callbackFn(textValue);
        });

        const sliderEvent = _.isBrowserIE() ? 'change' : 'input';
        this.addDestroyableEventListener(this.eSlider.getInputElement(), sliderEvent , () => {
            const sliderValue = this.eSlider.getValue();
            this.eText.setValue(sliderValue);
            callbackFn(parseFloat(sliderValue));
        });

        return this;
    }

    public setSliderWidth(width: number): this {
        this.eSlider.setWidth(width);
        return this;
    }

    public setTextFieldWidth(width: number): this {
        this.eText.setWidth(width);
        return this;
    }

    public setValue(value: string): this {
        if (this.eText.getValue() === value) {
            return this;
        }

        this.eText.setValue(value);
        this.eSlider.setValue(value);

        return this;
    }

    public setMinValue(minValue: number): this {
        this.eSlider.setMinValue(minValue);
        this.eText.setMin(minValue);

        return this;
    }

    public setMaxValue(maxValue: number): this {
        this.eSlider.setMaxValue(maxValue);
        this.eText.setMax(maxValue);
        return this;
    }

    public getValue(): string {
        return this.eText.getValue();
    }
}
{'fraction_non_alphanumeric': 0.13023829087921118, 'fraction_numerical': 0.0018488085456039441, 'mean_word_length': 2.5206073752711498, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 29, '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': '1687834', 'n_tokens_mistral': 1398, 'n_tokens_neox': 1385, 'n_words': 270}