import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DtIEDtZ8.js';
import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#BFBBBB}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#BFBBBB}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input.firefox__classes:disabled{color:#FFFFFF}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#BFBBBB;background-color:#BFBBBB;cursor:default}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input:disabled::-webkit-datetime-edit,.date__picker-input:disabled::-webkit-datetime-edit-text{color:#FFFFFF}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#BFBBBB;color:#FFFFFF}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";

const DatePicker = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.ifxDate = createEvent(this, "ifxDate", 7);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
        this.inputId = `ifx-date-picker-${++datePickerId}`;
        this.size = 's';
        this.error = false;
        this.success = false;
        this.disabled = false;
        this.type = 'date';
        this.required = false;
        this.autocomplete = 'on';
    }
    getDate(e) {
        const inputValue = e.target.value;
        const selectedDate = new Date(inputValue);
        const day = selectedDate.getDate();
        const month = selectedDate.getMonth() + 1;
        const year = selectedDate.getFullYear();
        if (!inputValue) {
            //this.internals.setFormValue(null);
            if (this.type === 'datetime-local') {
                const hours = selectedDate.getHours();
                const minutes = selectedDate.getMinutes();
                this.ifxDate.emit({ day, month, year, hours, minutes });
            }
            else {
                this.ifxDate.emit({ day, month, year });
            }
            return;
        }
        const input = this.el.shadowRoot.querySelector('.date__picker-input');
        input.classList.add('has-value');
        //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
        if (this.type === 'datetime-local') {
            const hours = selectedDate.getHours();
            const minutes = selectedDate.getMinutes();
            this.ifxDate.emit({ day, month, year, hours, minutes });
        }
        else {
            this.ifxDate.emit({ day, month, year });
        }
    }
    handleInputFocusOnIconClick() {
        const input = this.el.shadowRoot.querySelector('.date__picker-input');
        if (input) {
            input.focus();
        }
    }
    getBrowser() {
        if (navigator.userAgent.indexOf("Chrome") != -1) {
            return "Chrome";
        }
        else if (navigator.userAgent.indexOf("Opera") != -1) {
            return "Opera";
        }
        else if (navigator.userAgent.indexOf("MSIE") != -1) {
            return "IE";
        }
        else if (navigator.userAgent.indexOf("Firefox") != -1) {
            return "Firefox";
        }
        else {
            return "unknown";
        }
    }
    setFireFoxClasses() {
        const browser = this.getBrowser();
        const input = this.el.shadowRoot.querySelector('.date__picker-input');
        if (browser === 'Firefox') {
            input.classList.add('firefox__classes');
        }
        else if (input.classList.contains('firefox__classes')) {
            input.classList.remove('firefox__classes');
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-date-picker', await framework);
        }
        this.setFireFoxClasses();
    }
    componentWillUpdate() {
        if (this.value) {
            this.getDate({ target: { value: this.value } });
        }
    }
    // formResetCallback() {
    //   this.internals.setFormValue(null);
    // }
    render() {
        var _a, _b;
        return (h("div", { key: 'dbb6f430496fefe886885ab005652d412bd30ebf', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '1c2a66b095a48206cf2c9931452964ac7d87dc59', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
            _a.trim(), h("span", { key: '0a754b66e239bae671a8c74ce2e0aa7ad5d47bcf', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '03eedd8172d239cc9bc7ed75a125e2d8213dce5c', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1ed8fb51d42502d703e564e53624b70e45334842', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'f1a55aa2e7ad2c9801b6a04a9a93d5b83fc63dac', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'e8109be168cf4e584350b2fe8cf98a908521eecd', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'df37c5fb29c31594720e7e112e18cdbce996942f', class: 'caption__wrapper' }, this.caption.trim()))));
    }
    get el() { return getElement(this); }
};
let datePickerId = 0;
DatePicker.style = datePickerCss;

export { DatePicker as ifx_date_picker };
//# sourceMappingURL=ifx-date-picker.entry.js.map

//# sourceMappingURL=ifx-date-picker.entry.js.map