'use strict';

var index = require('./index-feA4skrY.js');
var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
var index$1 = require('./index-BZ67Dcnb.js');
var aria = require('./aria-BzkqcV7W.js');
var attributes = require('./attributes-Cp0kpySW.js');
var bem = require('./bem-p0PWVN8n.js');
var keys_constant = require('./keys.constant-LnwxHAZo.js');
var form = require('./form-BSlIiqcR.js');
var formInput = require('./form-input-BwFB4Rej.js');
var helpers = require('./helpers-HuaiWXrB.js');
var log = require('./log-CXDMiw7o.js');
var balTimeInput_i18n = require('./bal-time-input.i18n-Bfr3EMVD.js');
var config_default = require('./config.default-Cko-wpRU.js');
var config_decorator = require('./config.decorator-CUe4yCTd.js');
require('./_commonjsHelpers-BJu3ubxk.js');
require('./browser-BwmkTmm8.js');
require('./config.utils-Civnz2jT.js');

const balTimeInputCss = ":root{--bal-time-input-native-placeholder-background-before:var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before:var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before:var(--bal-color-grey-1);--bal-time-input-native-text-color:var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value:var(--bal-color-primary);--bal-time-input-native-text-color-disabled:var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value:var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before:var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before:var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-focus::-webkit-datetime-edit-text,.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-focus::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field,.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-focus::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field,.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}";

const TimeInput = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.balInput = index.createEvent(this, "balInput");
        this.balChange = index.createEvent(this, "balChange");
        this.balBlur = index.createEvent(this, "balBlur");
        this.balFocus = index.createEvent(this, "balFocus");
        this.balKeyPress = index.createEvent(this, "balKeyPress");
        this.balClick = index.createEvent(this, "balClick");
        this.inputId = `bal-time-input-${timeInputIds++}`;
        this.inheritedAttributes = {};
        this.inputValue = this.value;
        this.initialValue = '';
        this.focused = false;
        this.language = config_default.defaultConfig.language;
        this.region = config_default.defaultConfig.region;
        this.ariaForm = form.defaultBalAriaForm;
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * If `true` the component gets a invalid style.
         */
        this.invalid = false;
        /**
         * If `true`, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
         */
        this.disabled = false;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = false;
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
         */
        this.debounce = 0;
        /**
         * The value of the input.
         */
        this.value = undefined;
        /**
         * If `true`, in Angular reactive forms the control will not be set invalid
         */
        this.autoInvalidOff = false;
        this.onInput = (ev) => {
            const input = formInput.getInputTarget(ev);
            if (input) {
                this.inputValue = input.value;
            }
            this.balInput.emit(this.inputValue);
        };
        this.onFocus = (ev) => {
            formInput.inputHandleFocus(this, ev);
        };
        this.onBlur = (ev) => {
            formInput.inputHandleBlur(this, ev);
            const input = ev.target;
            if (input) {
                input.value = this.getFormattedValue();
                formInput.inputHandleChange(this);
            }
        };
        this.onKeydown = (ev) => {
            if (!index$1.isNil(ev) && !keys_constant.isCtrlOrCommandKey(ev)) {
                if (!this.getAllowedKeys().includes(ev.key)) {
                    return formInput.stopEventBubbling(ev);
                }
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    debounceChanged() {
        this.balChange = helpers.debounceEvent(this.balChange, this.debounce);
    }
    listenOnClick(ev) {
        formInput.inputListenOnClick(this, ev);
    }
    resetHandler(ev) {
        const formElement = ev.target;
        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
            formInput.inputHandleReset(this, this.initialValue, this.resetHandlerTimer);
        }
    }
    connectedCallback() {
        this.debounceChanged();
        this.initialValue = this.value || '';
    }
    componentDidLoad() {
        this.inputValue = this.value;
    }
    componentWillLoad() {
        this.inheritedAttributes = attributes.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
        this.region = state.region;
        if (!this.focused && this.nativeInput) {
            this.nativeInput.value = this.getFormattedValue();
        }
    }
    /**
     * Sets focus on the native `input`. Use this method instead of the global
     * `input.focus()`.
     */
    async setFocus() {
        formInput.inputSetFocus(this);
    }
    /**
     * Sets blur on the native `input`. Use this method instead of the global
     * `input.blur()`.
     * @internal
     */
    async setBlur() {
        formInput.inputSetBlur(this);
    }
    /**
     * Returns the native `<input>` element used under the hood.
     */
    async getInputElement() {
        return this.nativeInput;
    }
    /**
     * @internal
     */
    async setAriaForm(ariaForm) {
        this.ariaForm = Object.assign({}, ariaForm);
    }
    getAllowedKeys() {
        return [...keys_constant.NUMBER_KEYS, ...keys_constant.ACTION_KEYS, ':', 'A', 'M', 'P'];
    }
    getRawValue() {
        const value = (this.value || '').toString();
        return value;
    }
    getFormattedValue() {
        return this.getRawValue();
    }
    render() {
        const value = this.focused ? this.getRawValue() : this.getFormattedValue();
        const block = bem.BEM.block('time-input');
        const native = block.element('native');
        return (index.h(index.Host, { key: '6b1b0a24a554e6c36befcc44f888a4a6582b2ada', "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, index.h("bal-input-group", { key: 'e0a53ed0fa5bc08deb818fb6e7119bef8bf5bed1', disabled: this.disabled || this.readonly, invalid: this.invalid }, index.h("input", Object.assign({ key: '7ede7fc70c763cae673b67192a4ab467f0a5c7fc', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${balTimeInput_i18n.i18nBalTimeInput[this.language].hours}:${balTimeInput_i18n.i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), index.h("bal-icon", { key: 'cce0762bb6cb91dd62ced90ab7b8defbf75ca7ac', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "debounce": ["debounceChanged"]
    }; }
};
tslib_es6.__decorate([
    log.Logger('bal-time-input'),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Function]),
    tslib_es6.__metadata("design:returntype", void 0)
], TimeInput.prototype, "createLogger", null);
tslib_es6.__decorate([
    config_decorator.ListenToConfig(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", Promise)
], TimeInput.prototype, "configChanged", null);
let timeInputIds = 0;
TimeInput.style = balTimeInputCss;

exports.bal_time_input = TimeInput;
