"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const field_1 = require("../../../../../client/field");
const style_1 = require("../../../../../client/style");
exports.DEFAULT_STYLE = {
    height: 'fit-content',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    padding: '0',
    fontSize: '18px',
    // outlineColor: '#00000000',
    border: 'none',
    borderRadius: '0',
};
class EditableField extends field_1.Field {
    constructor($props, $system) {
        super($props, $system, $system.api.document.createElement('div'), {
            valueKey: 'innerText',
            defaultStyle: exports.DEFAULT_STYLE,
            defaultValue: '',
        });
        this.$element.contentEditable = 'true';
        const { flags: { defaultInputModeNone }, } = $system;
        const { style, maxLength, tabIndex } = $props;
        this.$element.spellcheck = false;
        this.$element.autocapitalize = 'off';
        this.$element.inputMode = 'text';
        if (defaultInputModeNone) {
            this.$element.inputMode = 'none';
        }
        if (tabIndex !== undefined) {
            this.$element.tabIndex = tabIndex;
        }
        (0, style_1.applyDynamicStyle)(this, this.$element, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
    }
}
exports.default = EditableField;
//# sourceMappingURL=Component.js.map