'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-b7b9d752.js');
const timePicker_service = require('./time-picker.service-9a0c9806.js');

const TimePickerClock = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.meridiemOptions = [
            { label: '-', value: '' },
            { label: 'AM', value: 'AM' },
            { label: 'PM', value: 'PM' }
        ];
        this.parsedTime = { hour: '', minutes: '', control: '' };
        this.context = 'horizontal';
        /**
         * Bool to display time in meridiem or military
         */
        this.meridiem = true;
        this.anjTimeChanged = core.createEvent(this, "anjTimeChanged", 7);
    }
    injectedPropWatcher() {
        this.assignStrategy();
    }
    valueHandler(newValue) {
        this.parseTime(newValue);
    }
    // Prevent the events from bubbling up to the parent form group
    onFormElementLoaded(event) {
        event.stopPropagation();
    }
    componentWillLoad() {
        this.assignStrategy();
        this.parseTime(this.value);
    }
    /**
     * Blur from our child inputs will propogate value
     */
    onAnjBlur() {
        this.anjTimeChanged.emit({ parsedValue: this.parsedTime });
    }
    /**
     * Listens for hour update.
     */
    onAnjHourChange(event) {
        this.parsedTime.hour = event.detail;
    }
    /**
     * Listens for hour autotab instruction.
     */
    onAnjHourTab() {
        this.minInput.focusNativeInput();
    }
    /**
     * Listens for hour update.
     */
    onAnjMinuteChange(event) {
        this.parsedTime.minutes = event.detail;
    }
    async focusHour() {
        this.hourInput.focusNativeInput();
    }
    assignStrategy() {
        this.strategy = (this.meridiem) ? new timePicker_service.MeridiemTimeDisplay(this.locale, this.language) : new timePicker_service.MilitaryTimeDisplay(this.locale, this.language);
    }
    controlSelected(event) {
        this.parsedTime.control = event.detail.value;
        this.anjTimeChanged.emit({ parsedValue: this.parsedTime });
    }
    parseTime(value) {
        this.parsedTime = this.strategy.parseToTimeFields(value);
    }
    render() {
        return (core.h("div", { class: (this.strategy.useControl()) ? 'anj-time-picker' : 'anj-time-picker anj-no-control' }, core.h("div", { class: "anj-time-controls" }, core.h("div", { class: "anj-time-block" }, core.h("anj-time-picker-input", { strategy: this.strategy, value: this.parsedTime.hour, ref: r => this.hourInput = r })), core.h("div", { class: "anj-time-block" }, core.h("anj-time-picker-input", { strategy: this.strategy, minutes: true, value: this.parsedTime.minutes, ref: r => this.minInput = r })), (this.strategy.useControl()) ?
            core.h("div", { class: "anj-time-block" }, core.h("anj-form-group", { class: "anj-meridian" }, core.h("anj-label", null, "AM/PM"), core.h("anj-select", { onAnjChange: e => this.controlSelected(e), value: this.parsedTime.control }, this.meridiemOptions.map(option => core.h("anj-option", { value: option.value }, option.label)))))
            : undefined)));
    }
    static get watchers() { return {
        "locale": ["injectedPropWatcher"],
        "language": ["injectedPropWatcher"],
        "value": ["valueHandler"]
    }; }
    static get style() { return "[context=horizontal].sc-anj-time-picker-clock-h .anj-time-picker.sc-anj-time-picker-clock {\n  width: 250px;\n}\n[context=horizontal].sc-anj-time-picker-clock-h .anj-time-picker.anj-no-control.sc-anj-time-picker-clock {\n  width: 175px;\n}\n[context=horizontal].sc-anj-time-picker-clock-h .anj-time-picker.sc-anj-time-picker-clock .anj-meridian.sc-anj-time-picker-clock {\n  width: 65px;\n}\n[context=horizontal].sc-anj-time-picker-clock-h .anj-time-controls.sc-anj-time-picker-clock {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n}\n[context=vertical].sc-anj-time-picker-clock-h .anj-time-controls.sc-anj-time-picker-clock {\n  display: block;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  width: 105px;\n}\n.sc-anj-time-picker-clock-h .anj-time-block.sc-anj-time-picker-clock {\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin-top: 1rem;\n  max-width: 100%;\n  padding: 0 15px;\n}"; }
};

exports.anj_time_picker_clock = TimePickerClock;
