'use strict';

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

const index = require('./index-9a9efa1c.js');
const index$1 = require('./index-61ff1b55.js');
const minus = require('./minus-5b6b8813.js');

const pnDropdownWithMultiInputRowsRowCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-dropdown-with-multi-input-rows-row .input-element-row{display:flex;gap:1rem;margin-bottom:1rem}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container{width:30%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container pn-marketweb-input .input-container{width:100%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container pn-date-picker{width:100%}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container{margin-top:0.3rem}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container__error{color:red;line-height:1}pn-dropdown-with-multi-input-rows-row .input-element-row .input-container .input-element-message-container__warning{line-height:1}pn-dropdown-with-multi-input-rows-row .delete-button-contianer{margin-top:0.6rem}pn-dropdown-with-multi-input-rows-row label.pn-date-picker-label:has(span:empty){display:none}";
const PnDropdownWithMultiInputRowsRowStyle0 = pnDropdownWithMultiInputRowsRowCss;

const PnDropdownWithMultiInputRowsRow = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.rowValueChange = index.createEvent(this, "rowValueChange", 7);
        this.deleteRowEvent = index.createEvent(this, "deleteRowEvent", 7);
        this.firstInputChange = index.createEvent(this, "firstInputChange", 7);
        this.secondInputChange = index.createEvent(this, "secondInputChange", 7);
        this.languageCode = null;
        this.firstInputPlaceholder = null;
        this.firstInputMin = null;
        this.firstInputMax = null;
        this.firstInputWarning = null;
        this.firstInputWarningText = null;
        this.firstInputLowErrorText = null;
        this.firstInputHighErrorText = null;
        this.secondInputPlaceholder = null;
        this.secondInputMin = null;
        this.secondInputMax = null;
        this.secondInputWarning = null;
        this.secondInputWarningText = null;
        this.secondInputLowErrorText = null;
        this.secondInputHighErrorText = null;
        this.dateLabel = null;
        this.datePlaceholder = null;
        this.firstValidDate = null;
        this.lastValidDate = null;
        this.predefinedValue = null;
        this.rowIndex = null;
        this.minRowCount = null;
        this.disabledDates = null;
        this.showFirstInputWarning = false;
        this.showFirstInputLowError = false;
        this.showFirstInputHighError = false;
        this.showSecondInputWarning = false;
        this.showSecondInputLowError = false;
        this.showSecondInputHighError = false;
        this.firstInputValue = '';
        this.secondInputValue = '';
        this.dateValue = '';
    }
    get hostElement() { return index.getElement(this); }
    _predefinedValue;
    pnFirstInputField = null;
    pnSecondInputField = null;
    pnDatePicker = null;
    pnDeleteRowButton = null;
    rowValueChange;
    deleteRowEvent;
    firstInputChange;
    secondInputChange;
    componentWillLoad() {
        this.getPredefinedValues();
        this.setInitialValues();
    }
    componentDidLoad() {
        this.addEventHandlers();
    }
    getPredefinedValues() {
        this._predefinedValue = JSON.parse(this.predefinedValue);
    }
    applyPredefinedValue() {
        this.getPredefinedValues();
        this.setInitialValues();
        if (this.firstInputValue?.length) {
            this.validateFirstInput(parseInt(this.firstInputValue));
        }
        if (this.secondInputValue?.length) {
            this.validateSecondInput(parseInt(this.secondInputValue));
        }
        if (this.rowIndex >= this.minRowCount) {
            this.pnDeleteRowButton.addEventListener('click', this.deleteRow.bind(this));
        }
    }
    setInitialValues() {
        this.firstInputValue = this._predefinedValue.firstInput;
        this.secondInputValue = this._predefinedValue.secondInput;
        this.dateValue = this._predefinedValue.date;
    }
    addEventHandlers() {
        const emmitValues = index$1.debounce(this.emitRowValues.bind(this), 500);
        this.pnFirstInputField.addEventListener('keyup', index$1.debounce(this.handleFirstInput.bind(this), 500));
        this.pnSecondInputField.addEventListener('keyup', index$1.debounce(this.handleSecondInput.bind(this), 500));
        this.pnDatePicker.addEventListener('dateselection', this.handleDateChange.bind(this));
        this.pnDatePicker.addEventListener('dateselection', emmitValues);
    }
    handleFirstInput(e) {
        const elm = e.target;
        const value = parseInt(elm.value);
        if (value > 0) {
            this.firstInputValue = elm.value;
            this.firstInputChange.emit({
                id: this._predefinedValue.id,
                firstInput: this.firstInputValue,
                secondInput: this.secondInputValue,
                date: this.dateValue,
            });
        }
        this.validateFirstInput(value);
        this.emitRowValues();
    }
    handleSecondInput(e) {
        const elm = e.target;
        const value = parseInt(elm.value);
        if (value > 0) {
            this.secondInputValue = elm.value;
            this.secondInputChange.emit({
                id: this._predefinedValue.id,
                firstInput: this.firstInputValue,
                secondInput: this.secondInputValue,
                date: this.dateValue,
            });
        }
        this.validateSecondInput(value);
        this.emitRowValues();
    }
    validateFirstInput(input) {
        this.showFirstInputWarning = false;
        this.showFirstInputLowError = false;
        this.showFirstInputHighError = false;
        if (input < this.firstInputWarning) {
            this.showFirstInputWarning = true;
        }
        if (input < this.firstInputMin) {
            this.showFirstInputWarning = false;
            this.showFirstInputLowError = true;
        }
        if (input > this.firstInputMax) {
            this.showFirstInputWarning = false;
            this.showFirstInputLowError = false;
            this.showFirstInputHighError = true;
        }
    }
    validateSecondInput(input) {
        this.showSecondInputWarning = false;
        this.showSecondInputLowError = false;
        this.showSecondInputHighError = false;
        if (input < this.secondInputWarning) {
            this.showSecondInputWarning = true;
        }
        if (input < this.secondInputMin) {
            this.showSecondInputWarning = false;
            this.showSecondInputLowError = true;
        }
        if (input > this.secondInputMax) {
            this.showSecondInputWarning = false;
            this.showSecondInputLowError = false;
            this.showSecondInputHighError = true;
        }
    }
    handleDateChange(e) {
        const elm = e.target;
        if (elm === this.pnDatePicker) {
            this.dateValue = e.detail.start;
        }
    }
    emitRowValues() {
        this.rowValueChange.emit({
            id: this._predefinedValue.id,
            firstInput: this.firstInputValue,
            secondInput: this.secondInputValue,
            date: this.dateValue,
        });
    }
    deleteRow() {
        this.deleteRowEvent.emit(this._predefinedValue.id);
    }
    render() {
        return (index.h(index.Host, { key: '6807110e253e2435958c132d668a249af140c6e7' }, index.h("div", { key: 'bb307f8b275ac03cfbe785cde15a61d29e1a193c', class: "input-element-row" }, index.h("div", { key: 'cdc4e84746ff36b099bb1ef0d3989322de3bc8e4', class: "input-container" }, index.h("pn-input", { key: '296be69efd2fc3ca0797913249f68e67e24d86c2', ref: el => (this.pnFirstInputField = el), type: "number", placeholder: this.firstInputPlaceholder, value: this.firstInputValue, min: "1" }), this.showFirstInputLowError || this.showFirstInputHighError || this.showFirstInputWarning ? (index.h("div", { class: "input-element-message-container" }, this.showFirstInputLowError ? (index.h("div", { class: "input-element-message-container__error" }, index.h("small", null, this.firstInputLowErrorText))) : null, this.showFirstInputHighError ? (index.h("div", { class: "input-element-message-container__error" }, index.h("small", null, this.firstInputHighErrorText))) : null, this.showFirstInputWarning ? (index.h("div", { class: "input-element-message-container__warning" }, index.h("small", null, this.firstInputWarningText))) : null)) : null), index.h("div", { key: '2834f8fb76abb28e7a560276334bd9c20fb59a1f', class: "input-container" }, index.h("pn-input", { key: 'cc5f59a061a001c1659d8a3734452ba20bf6213a', ref: el => (this.pnSecondInputField = el), type: "number", placeholder: this.secondInputPlaceholder, value: this.secondInputValue, min: "1" }), this.showSecondInputLowError || this.showSecondInputHighError || this.showSecondInputWarning ? (index.h("div", { class: "input-element-message-container" }, this.showSecondInputLowError ? (index.h("div", { class: "input-element-message-container__error" }, index.h("small", null, this.secondInputLowErrorText))) : null, this.showSecondInputHighError ? (index.h("div", { class: "input-element-message-container__error" }, index.h("small", null, this.secondInputHighErrorText))) : null, this.showSecondInputWarning ? (index.h("div", { class: "input-element-message-container__warning" }, index.h("small", null, this.secondInputWarningText))) : null)) : null), index.h("div", { key: '96888441a54b2e46d8f94d4db50f892d0bd88d8e', class: "input-container" }, index.h("pn-date-picker", { key: 'e18063b05aa1e6029f6ff8976394fc49afb361ab', ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": true, "disabled-dates": this.disabledDates, "min-date": this.firstValidDate, "max-date": this.lastValidDate, language: this.languageCode, placeholder: this.datePlaceholder, start: this.dateValue?.length ? this.dateValue : null })), this.rowIndex >= this.minRowCount ? (index.h("div", { class: "delete-button-container" }, index.h("pn-button", { ref: el => (this.pnDeleteRowButton = el), small: "true", icon: minus.minus, appearance: "warning", index: this.rowIndex, onClick: () => {
                this.deleteRow();
            } }, "Delete"))) : null)));
    }
    static get watchers() { return {
        "predefinedValue": ["applyPredefinedValue"]
    }; }
};
PnDropdownWithMultiInputRowsRow.style = PnDropdownWithMultiInputRowsRowStyle0;

exports.pn_dropdown_with_multi_input_rows_row = PnDropdownWithMultiInputRowsRow;

//# sourceMappingURL=pn-dropdown-with-multi-input-rows-row.cjs.entry.js.map