import { h } from "@stencil/core";
import Tunnel from '../../locale/i18n.provider';
var AttributeTitles;
(function (AttributeTitles) {
    AttributeTitles["CHANGE_DAY"] = "Change Day";
    AttributeTitles["PREV_YEAR"] = "Previous Year";
    AttributeTitles["TODAY"] = "Today";
    AttributeTitles["NEXT_YEAR"] = "Next Year";
})(AttributeTitles || (AttributeTitles = {}));
export class YearView {
    yearChangeHandler(year) {
        this.anjYearChanged.emit(year);
    }
    monthChangeHandler(value) {
        this.anjMonthChanged.emit(value);
    }
    modeChangeHandler(value) {
        this.anjToggleMonthMode.emit(value);
    }
    render() {
        return [
            h("div", { class: "anj-calendar-top" },
                h("anj-button", { context: "text", class: "anj-current", title: this.translator(AttributeTitles.CHANGE_DAY), onClick: () => this.modeChangeHandler(true) },
                    h("span", null, this.package.year),
                    h("anj-icon-opener", { slot: "end", open: true })),
                h("div", { class: "anj-date-nav" },
                    h("anj-button", { context: "icon", title: this.translator(AttributeTitles.PREV_YEAR), "aria-label": this.translator(AttributeTitles.PREV_YEAR), onClick: () => this.yearChangeHandler(-1) },
                        h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                            h("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }))),
                    h("anj-button", { context: "icon", title: this.translator(AttributeTitles.TODAY), "aria-label": this.translator(AttributeTitles.TODAY), onClick: () => this.modeChangeHandler(true) },
                        h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                            h("circle", { cx: "12", cy: "12", r: "6" }))),
                    h("anj-button", { context: "icon", title: this.translator(AttributeTitles.NEXT_YEAR), "aria-label": this.translator(AttributeTitles.NEXT_YEAR), onClick: () => this.yearChangeHandler(1) },
                        h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                            h("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }))))),
            h("div", { class: "anj-calendar-inner" }, this.package.months.map((month, index) => h("anj-date-picker-month", { month: month, selected: this.package.month === index, onClick: () => this.monthChangeHandler(index) })))
        ];
    }
    static get is() { return "anj-date-picker-year-view"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["year-view.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["year-view.css"]
    }; }
    static get properties() { return {
        "package": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "CalendarPackage",
                "resolved": "CalendarPackage",
                "references": {
                    "CalendarPackage": {
                        "location": "import",
                        "path": "../../../types/types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "translator": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "IntlFormatFn",
                "resolved": "(value: any, variables?: any) => string",
                "references": {
                    "IntlFormatFn": {
                        "location": "import",
                        "path": "../../locale/i18n.provider"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": undefined,
                        "name": "internal"
                    }],
                "text": ""
            }
        }
    }; }
    static get events() { return [{
            "method": "anjToggleMonthMode",
            "name": "anjToggleMonthMode",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjMonthChanged",
            "name": "anjMonthChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjYearChanged",
            "name": "anjYearChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
Tunnel.injectProps(YearView, ['translator']);
