/* STENCIL IMPORTS */
import { Host, h } from "@stencil/core";
/* OTHER LIBRARIES IMPORTS */
/* CUSTOM IMPORTS */
import { config } from "../../../common/config";
import { Locale } from "../../../common/locale";
export class GxIdeBpmTimerDuration {
    constructor() {
        this.renderedFirstTime = false;
        // 7.LISTENERS //
        // 8.PUBLIC METHODS API //
        // 9.LOCAL METHODS //
        this.confirmCallbackHandler = async () => {
            if (this.confirmCallback) {
                const data = {
                    years: parseInt(this.yearsEl.value),
                    months: parseInt(this.monthsEl.value),
                    days: parseInt(this.daysEl.value),
                    hours: parseInt(this.hoursEl.value),
                    minutes: parseInt(this.minutesEl.value),
                    seconds: parseInt(this.secondsEl.value)
                };
                await this.confirmCallback(data);
            }
        };
        this.displayTitle = false;
        this.duration = undefined;
        this.confirmCallback = undefined;
        this.cancelCallback = undefined;
    }
    // 6.COMPONENT LIFECYCLE METHODS //
    async componentWillLoad() {
        this._componentLocale = await Locale.getComponentStrings(this.el);
    }
    componentDidRender() {
        if (!this.renderedFirstTime) {
            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
            this.renderedFirstTime = true;
        }
    }
    // 10.RENDER() FUNCTION //
    render() {
        var _a, _b, _c, _d, _e, _f;
        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "control-wrapper control-wrapper--vertical" }, h("label", { htmlFor: "years" }, this._componentLocale.controls.years), h("input", { type: "number", id: "years", class: "input-text input-text--full-width", value: (_a = this.duration) === null || _a === void 0 ? void 0 : _a.years.toString(), ref: el => (this.yearsEl = el) })), h("div", { class: "control-wrapper control-wrapper--vertical" }, h("label", { htmlFor: "months" }, this._componentLocale.controls.months), h("input", { type: "number", id: "months", class: "input-text input-text--full-width", value: (_b = this.duration) === null || _b === void 0 ? void 0 : _b.months.toString(), ref: el => (this.monthsEl = el) })), h("div", { class: "control-wrapper control-wrapper--vertical" }, h("label", { htmlFor: "days" }, this._componentLocale.controls.days), h("input", { type: "number", id: "days", class: "input-text input-text--full-width", value: (_c = this.duration) === null || _c === void 0 ? void 0 : _c.days.toString(), ref: el => (this.daysEl = el) })), h("div", { class: "control-wrapper control-wrapper--vertical" }, h("label", { htmlFor: "hours" }, this._componentLocale.controls.hours), h("input", { type: "number", id: "hours", class: "input-text input-text--full-width", value: (_d = this.duration) === null || _d === void 0 ? void 0 : _d.hours.toString(), ref: el => (this.hoursEl = el) })), h("div", { class: "control-wrapper control-wrapper--vertical" }, h("label", { htmlFor: "minutes" }, this._componentLocale.controls.minutes), h("input", { type: "number", id: "minutes", class: "input-text input-text--full-width", value: (_e = this.duration) === null || _e === void 0 ? void 0 : _e.minutes.toString(), ref: el => (this.minutesEl = el) })), h("div", { class: "control-wrapper control-wrapper--vertical" }, h("label", { htmlFor: "seconds" }, this._componentLocale.controls.seconds), h("input", { type: "number", id: "seconds", class: "input-text input-text--full-width", value: (_f = this.duration) === null || _f === void 0 ? void 0 : _f.seconds.toString(), ref: el => (this.secondsEl = el) })), h("div", { class: "controls-wrapper" }, h("button", { onClick: this.confirmCallbackHandler }, this._componentLocale.controls.ok), h("button", { onClick: this.cancelCallback }, this._componentLocale.controls.cancel))))));
    }
    static get is() { return "gx-ide-bpm-timer-duration"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["bpm-timer-duration.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bpm-timer-duration.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/bpm-timer-duration"]; }
    static get properties() {
        return {
            "displayTitle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "false",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true it displays the component title on the header"
                },
                "attribute": "display-title",
                "reflect": false,
                "defaultValue": "false"
            },
            "duration": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "TimerDuration",
                    "resolved": "{ years: number; months: number; days: number; hours: number; minutes: number; seconds: number; }",
                    "references": {
                        "TimerDuration": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/timer-duration/bpm-timer-duration.tsx",
                            "id": "src/components/bpm/timer-duration/bpm-timer-duration.tsx::TimerDuration"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Current value for timer."
                }
            },
            "confirmCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(data: TimerDuration) => Promise<void>",
                    "resolved": "(data: TimerDuration) => Promise<void>",
                    "references": {
                        "TimerDuration": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/timer-duration/bpm-timer-duration.tsx",
                            "id": "src/components/bpm/timer-duration/bpm-timer-duration.tsx::TimerDuration"
                        },
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when user confirms application declaration, (OK Button)"
                }
            },
            "cancelCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => Promise<void>",
                    "resolved": "() => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when user cancels application declaration"
                }
            }
        };
    }
    static get events() {
        return [{
                "method": "componentDidRenderFirstTime",
                "name": "componentDidRenderFirstTime",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "description",
                            "text": "Gets fired when the component has rendered for the first time."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=bpm-timer-duration.js.map
