"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const classnames_1 = require("../../../../../client/classnames");
const element_1 = require("../../../../../client/element");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const theme_1 = require("../../../../../client/theme");
const Component_1 = __importDefault(require("../../value/TextField/Component"));
const HEIGHT = 39;
const DEFAULT_STYLE = {
    height: `${HEIGHT}px`,
    width: '100%',
    color: 'currentColor',
    borderTopWidth: '0',
    borderTopStyle: 'solid',
    borderTopColor: 'currentColor',
    backgroundColor: theme_1.COLOR_NONE,
    borderRadius: '3px 3px 0 0',
    fontSize: '16px',
    textAlign: 'center',
};
class SearchInput extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        const { className, style } = this.$props;
        const input = new Component_1.default({
            className: (0, classnames_1.classnames)('search-input', className),
            style: {
                ...DEFAULT_STYLE,
                ...style,
            },
            attr: {
                maxlength: 30,
                tabIndex: -1,
            },
        }, this.$system);
        this._input = input;
        const $element = (0, parentElement_1.parentElement)($system);
        this.$element = $element;
        this.$unbundled = false;
        this.$slot = {
            default: input,
        };
        this.$subComponent = {
            input,
        };
        this.registerRoot(input);
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            this._input.setProp('style', { ...DEFAULT_STYLE, ...current });
        }
        else if (prop === 'value') {
            this._input.setProp('value', current);
        }
    }
    setSelectionRange(start, end, direction) {
        this._input.setSelectionRange(start, end, direction);
    }
}
exports.default = SearchInput;
//# sourceMappingURL=Component.js.map