<commit_before>import { Component, IFloatingFilter, RefSelector } from "ag-grid-community";
import { SetFilterModel } from "./setFilterModel";

export class SetFloatingFilterComp extends Component implements IFloatingFilter {

    @RefSelector('eFloatingFilterText')
    private eFloatingFilterText: HTMLInputElement;

    constructor() {
        super(`<div class="ag-input-wrapper"><input ref="eFloatingFilterText" class="ag-floating-filter-input"></div>`);
    }

    public init(): void {
        this.eFloatingFilterText.disabled = true;
    }

    public onParentModelChanged(parentModel: SetFilterModel): void {
        if (!parentModel) {
            this.eFloatingFilterText.value = '';
            return;
        }

        // also supporting old filter model for backwards compatibility
        const values: string[] | null = (parentModel instanceof Array) ? parentModel : parentModel.values;

        if (!values || values.length === 0) {
            this.eFloatingFilterText.value = '';
            return;
        }

        const arrayToDisplay = values.length > 10 ? values.slice(0, 10).concat('...') : values;
        const valuesString = `(${values.length}) ${arrayToDisplay.join(",")}`;

        this.eFloatingFilterText.value = valuesString;
    }

}<commit_msg>AG-3104 Floating filter shows unformatted values as opposed to the column menu filter<commit_after>import {Autowired, Component, IFloatingFilter, RefSelector, ValueFormatterService, Column} from "ag-grid-community";
import { SetFilterModel } from "./setFilterModel";
import {IFloatingFilterParams} from "ag-grid-community/src/ts/filter/floating/floatingFilter";

export class SetFloatingFilterComp extends Component implements IFloatingFilter {

    @RefSelector('eFloatingFilterText')
    private eFloatingFilterText: HTMLInputElement;

    @Autowired('valueFormatterService')
    private valueFormatterService: ValueFormatterService;

    private column: Column;

    constructor() {
        super(`<div class="ag-input-wrapper"><input ref="eFloatingFilterText" class="ag-floating-filter-input"></div>`);
    }

    public init(params: IFloatingFilterParams): void {
        this.eFloatingFilterText.disabled = true;
        this.column = params.column;
    }

    public onParentModelChanged(parentModel: SetFilterModel): void {
        if (!parentModel) {
            this.eFloatingFilterText.value = '';
            return;
        }

        // also supporting old filter model for backwards compatibility
        const values: string[] | null = (parentModel instanceof Array) ? parentModel : parentModel.values;

        if (!values || values.length === 0) {
            this.eFloatingFilterText.value = '';
            return;
        }

        // format all the values, if a formatter is provided
        for (var i = 0; i<values.length; i++) {
            var valueUnformatted = values[i];
            const valueFormatted =
                this.valueFormatterService.formatValue(this.column, null, null, valueUnformatted);
            if (valueFormatted!=null) {
                values[i] = valueFormatted;
            }
        }


        const arrayToDisplay = values.length > 10 ? values.slice(0, 10).concat('...') : values;
        const valuesString = `(${values.length}) ${arrayToDisplay.join(",")}`;

        this.eFloatingFilterText.value = valuesString;
    }

}
{'fraction_non_alphanumeric': 0.11342042755344418, 'fraction_numerical': 0.005047505938242281, 'mean_word_length': 3.001187648456057, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 11, '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': '3314397', 'n_tokens_mistral': 939, 'n_tokens_neox': 901, 'n_words': 207}