<commit_before>import { AgColorPanel } from "./agColorPanel";
import { AgDialog } from "./agDialog";
import { IAgLabel } from "./agAbstractLabel";
import { AgPickerField } from "./agPickerField";
import { AgAbstractField } from "./agAbstractField";
import { _ } from "../utils";

interface ColorPickerConfig extends IAgLabel {
    color: string;
}

export class AgColorPicker extends AgPickerField<HTMLElement, string> {

    protected displayTag = 'div';
    protected className = 'ag-color-picker';
    protected pickerIcon = 'colorPicker';

    constructor(config?: ColorPickerConfig) {
        super();
        this.setTemplate(this.TEMPLATE.replace(/%displayField%/g, this.displayTag));

        if (config && config.color) {
            this.value = config.color;
        }
    }

    protected postConstruct() {
        super.postConstruct();

        if (this.value) {
            this.setValue(this.value);
        }
    }

    protected showPicker() {
        const eGuiRect = this.getGui().getBoundingClientRect();
        const colorDialog = new AgDialog({
            closable: false,
            modal: true,
            hideTitleBar: true,
            minWidth: 190,
            width: 190,
            height: 250,
            x: eGuiRect.right - 190,
            y: eGuiRect.top - 250
        });
        this.getContext().wireBean(colorDialog);

        _.addCssClass(colorDialog.getGui(), 'ag-color-dialog');

        const colorPanel = new AgColorPanel({
            picker: this
        });
        this.getContext().wireBean(colorPanel);

        colorPanel.addDestroyFunc(() => {
            if (colorDialog.isAlive()) {
                colorDialog.destroy();
            }
        });

        colorDialog.setParentComponent(this);
        colorDialog.setBodyComponent(colorPanel);
        colorPanel.setValue(this.getValue());

        colorDialog.addDestroyFunc(() => {
            const wasDestroying = this.isDestroyingPicker;

            // here we check if the picker was already being
            // destroyed to avoid a stackoverflow
            if (!wasDestroying) {
                this.isDestroyingPicker = true;
                if (colorPanel.isAlive()) {
                    colorPanel.destroy();
                }
            } else {
                this.isDestroyingPicker = false;
            }
        });

        return colorDialog;
    }

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

        this.value = color;
        this.eDisplayField.style.backgroundColor = color;
        this.dispatchEvent({ type: AgAbstractField.EVENT_CHANGED });

        return this;
    }

    public getValue(): string {
        return this.value;
    }
}<commit_msg>AG-3606 - fixed ColorPicker focus handling<commit_after>import { AgColorPanel } from "./agColorPanel";
import { AgDialog } from "./agDialog";
import { IAgLabel } from "./agAbstractLabel";
import { AgPickerField } from "./agPickerField";
import { AgAbstractField } from "./agAbstractField";
import { _ } from "../utils";

interface ColorPickerConfig extends IAgLabel {
    color: string;
}

export class AgColorPicker extends AgPickerField<HTMLElement, string> {

    protected displayTag = 'div';
    protected className = 'ag-color-picker';
    protected pickerIcon = 'colorPicker';

    constructor(config?: ColorPickerConfig) {
        super();
        this.setTemplate(this.TEMPLATE.replace(/%displayField%/g, this.displayTag));

        if (config && config.color) {
            this.value = config.color;
        }
    }

    protected postConstruct() {
        super.postConstruct();

        if (this.value) {
            this.setValue(this.value);
        }
    }

    protected showPicker() {
        const eGuiRect = this.getGui().getBoundingClientRect();
        const colorDialog = new AgDialog({
            closable: false,
            modal: true,
            hideTitleBar: true,
            minWidth: 190,
            width: 190,
            height: 250,
            x: eGuiRect.right - 190,
            y: eGuiRect.top - 250
        });
        this.getContext().wireBean(colorDialog);

        _.addCssClass(colorDialog.getGui(), 'ag-color-dialog');

        const colorPanel = new AgColorPanel({
            picker: this
        });
        this.getContext().wireBean(colorPanel);

        colorPanel.addDestroyFunc(() => {
            if (colorDialog.isAlive()) {
                colorDialog.destroy();
            }
        });

        colorDialog.setParentComponent(this);
        colorDialog.setBodyComponent(colorPanel);
        colorPanel.setValue(this.getValue());

        colorDialog.addDestroyFunc(() => {
            const wasDestroying = this.isDestroyingPicker;

            // here we check if the picker was already being
            // destroyed to avoid a stackoverflow
            if (!wasDestroying) {
                this.isDestroyingPicker = true;
                if (colorPanel.isAlive()) {
                    colorPanel.destroy();
                }
            } else {
                this.isDestroyingPicker = false;
            }

            if (this.isAlive()) {
                this.eWrapper.focus();
            }
        });

        return colorDialog;
    }

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

        this.value = color;
        this.eDisplayField.style.backgroundColor = color;
        this.dispatchEvent({ type: AgAbstractField.EVENT_CHANGED });

        return this;
    }

    public getValue(): string {
        return this.value;
    }
}
{'fraction_non_alphanumeric': 0.11247991430101767, 'fraction_numerical': 0.006070344581324764, 'mean_word_length': 1.934520691461498, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, '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': '2364557', 'n_tokens_mistral': 1543, 'n_tokens_neox': 1469, 'n_words': 321}