import { h } from "@stencil/core";
// import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/react-pro';
export class MonthNavigator {
    constructor() {
        this.showArrows = true;
        //   @Event() monthChange: EventEmitter<Date>;
        this.handlePrevClick = () => {
            const prevMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
            // this.monthChange.emit(prevMonth);
            this.onChange(prevMonth);
        };
        this.handleNextClick = () => {
            const nextMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 1);
            // this.monthChange.emit(nextMonth);
            this.onChange(nextMonth);
        };
    }
    render() {
        return (h("div", { key: '0d4f97e0f893a4f172ce98113501d391b7db51cb', class: "date-picker__navigator" }, h("div", { key: '066ac15e13f347affd979370f1a64771e012512b', class: "date-picker__navigator-label" }, this.currentMonth.toLocaleDateString('default', {
            month: 'long',
            year: 'numeric',
        })), this.showArrows && (h("div", { key: '2e2dfac28b681cb83fb4fe8423fe694888743e0e', class: "date-picker__navigator-buttons" }, h("dga-button", { key: 'e753b7581d900428607025c3fe6a9e95efcad840', variant: 'subtle', size: 'lg', iconOnly: true, iconType: 'arrow-left-02', iconProps: {
                variant: "stroke",
                type: "rounded"
            }, onClick: this.handlePrevClick }), h("dga-button", { key: '3588f3430696591c1e6b79f87f91a5443e6a5f33', variant: 'subtle', size: 'lg', iconOnly: true, iconType: 'arrow-right-02', iconProps: {
                variant: "stroke",
                type: "rounded"
            }, onClick: this.handleNextClick })))));
    }
    static get is() { return "month-navigator"; }
    static get properties() {
        return {
            "currentMonth": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "showArrows": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-arrows",
                "reflect": false,
                "defaultValue": "true"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(newMonth: Date) => void",
                    "resolved": "(newMonth: Date) => void",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
}
//# sourceMappingURL=MonthNavigator.js.map
