import { r as registerInstance, d as createEvent, h } from './core-b78a8f7e.js';
import { T as Tunnel } from './i18n.provider-59e68a9d.js';

var AttributeTitles;
(function (AttributeTitles) {
    AttributeTitles["CHANGE_MONTH"] = "Change Month";
    AttributeTitles["PREV_MONTH"] = "Previous Month";
    AttributeTitles["TODAY"] = "Today";
    AttributeTitles["NEXT_MONTH"] = "Next Month";
})(AttributeTitles || (AttributeTitles = {}));
const MonthView = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.today = new Date();
        this.anjToggleMonthMode = createEvent(this, "anjToggleMonthMode", 7);
        this.anjMonthUpdated = createEvent(this, "anjMonthUpdated", 7);
        this.anjDaySelect = createEvent(this, "anjDaySelect", 7);
    }
    monthUpdateHandler(value) {
        this.anjMonthUpdated.emit(value);
    }
    modeChangeHandler(value) {
        this.anjToggleMonthMode.emit(value);
    }
    modeChangeText() {
        const month = this.package.months[this.package.month] || '';
        const year = this.package.year;
        return `${month.slice(0, 3)} ${year}`;
    }
    onToday() {
        this.anjDaySelect.emit({
            day: this.today.getDate(),
            month: this.package.adapter.month(this.today),
            year: this.package.adapter.year(this.today)
        });
    }
    render() {
        const todayDisabled = this.package.adapter.isDisabled(this.today, this.rangeParams);
        return [
            h("div", { class: "anj-calendar-top" }, h("anj-button", { context: "text", class: "anj-current", title: this.translator(AttributeTitles.CHANGE_MONTH), onClick: () => this.modeChangeHandler(false) }, h("span", null, this.modeChangeText()), h("anj-icon-opener", { slot: "end" })), h("div", { class: "anj-date-nav" }, h("anj-button", { context: "icon", title: this.translator(AttributeTitles.PREV_MONTH), "aria-label": this.translator(AttributeTitles.PREV_MONTH), onClick: () => this.monthUpdateHandler(-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", disabled: todayDisabled, title: this.translator(AttributeTitles.TODAY), "aria-label": this.translator(AttributeTitles.TODAY), onClick: () => this.onToday() }, 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_MONTH), "aria-label": this.translator(AttributeTitles.NEXT_MONTH), onClick: () => this.monthUpdateHandler(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-week-container" }, this.package.weekdays.map(label => h("span", null, label[0]))),
            h("div", { class: "anj-calendar-inner" }, this.package.days.map(day => h("anj-date-picker-day", { adapter: this.package.adapter, day: day, month: this.package.month, date: this.package.date, rangeParams: this.rangeParams })))
        ];
    }
    static get style() { return ".sc-anj-date-picker-month-view-h {\n  display: block;\n}\n.sc-anj-date-picker-month-view-h .anj-current.sc-anj-date-picker-month-view {\n  --anj-link: --anj-text;\n  margin-left: -0.6rem;\n  position: relative;\n  top: 2px;\n}\n.sc-anj-date-picker-month-view-h .anj-date-nav.sc-anj-date-picker-month-view {\n  margin-right: -0.25rem;\n}\n.sc-anj-date-picker-month-view-h .anj-calendar-top.sc-anj-date-picker-month-view {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  padding: 0.75rem 1.25rem;\n}\n.sc-anj-date-picker-month-view-h .anj-calendar-top.sc-anj-date-picker-month-view .anj-current.sc-anj-date-picker-month-view {\n  color: var(--anj-primary);\n}\n.sc-anj-date-picker-month-view-h anj-icon-opener.sc-anj-date-picker-month-view {\n  margin-left: 0.25rem;\n  position: relative;\n  top: -2px;\n}\n.sc-anj-date-picker-month-view-h .anj-calendar-inner.sc-anj-date-picker-month-view {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-flow: row wrap;\n  flex-flow: row wrap;\n  padding: 0.5rem 1rem;\n}\n.sc-anj-date-picker-month-view-h .anj-week-container.sc-anj-date-picker-month-view {\n  display: -ms-flexbox;\n  display: flex;\n  font-size: 0.75rem;\n  padding: 0 1rem;\n  width: 100%;\n}\n.sc-anj-date-picker-month-view-h .anj-week-container.sc-anj-date-picker-month-view span.sc-anj-date-picker-month-view {\n  display: block;\n  -ms-flex-preferred-size: 0;\n  flex-basis: 0;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  max-width: 100%;\n  text-align: center;\n  width: calc(100% / 7);\n}"; }
};
Tunnel.injectProps(MonthView, ['translator']);

export { MonthView as anj_date_picker_month_view };
