igniteui-webcomponents 4.11.0 → 5.0.0-rc.0

package/components/calendar/calendar.js

@@ -5,598 +5,499 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcCalendarComponent_1;
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
+import { choose } from 'lit/directives/choose.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { themeSymbol, themes } from '../../theming/theming-decorator.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, pageDownKey, pageUpKey, shiftKey, } from '../common/controllers/key-bindings.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { IgcCalendarResourceStringEN, } from '../common/i18n/calendar.resources.js';
+import { IgcCalendarResourceStringEN } from '../common/i18n/calendar.resources.js';
+import { createDateTimeFormatters } from '../common/localization/intl-formatters.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { SizableMixin } from '../common/mixins/sizable.js';
-import { partNameMap } from '../common/util.js';
+import { clamp, findElementFromEventPath, first, formatString, last, partNameMap, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
-import { IgcCalendarBaseComponent, MONTHS_PER_ROW, YEARS_PER_ROW, } from './common/calendar-base.js';
-import { TimeDeltaInterval, } from './common/calendar.model.js';
-import { calculateYearsRangeStart, setDateSafe } from './common/utils.js';
+import { IgcCalendarBaseComponent } from './base.js';
 import IgcDaysViewComponent from './days-view/days-view.js';
+import { MONTHS_PER_ROW, YEARS_PER_PAGE, YEARS_PER_ROW, areSameMonth, getYearRange, isDateInRanges, } from './helpers.js';
+import { CalendarDay } from './model.js';
 import IgcMonthsViewComponent from './months-view/months-view.js';
 import { styles } from './themes/calendar.base.css.js';
 import { all } from './themes/calendar.js';
 import IgcYearsViewComponent from './years-view/years-view.js';
 export const focusActiveDate = Symbol();
-let IgcCalendarComponent = IgcCalendarComponent_1 = class IgcCalendarComponent extends SizableMixin(EventEmitterMixin(IgcCalendarBaseComponent)) {
+let IgcCalendarComponent = IgcCalendarComponent_1 = class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarBaseComponent) {
     static register() {
         registerComponent(IgcCalendarComponent_1, IgcIconComponent, IgcDaysViewComponent, IgcMonthsViewComponent, IgcYearsViewComponent);
     }
-    formattersChange() {
-        this.initFormatters();
+    get _isDayView() {
+        return this.activeView === 'days';
     }
-    constructor() {
-        super();
-        this.activeDaysViewIndex = 0;
-        this.hideOutsideDays = false;
-        this.hideHeader = false;
-        this.headerOrientation = 'horizontal';
-        this.orientation = 'horizontal';
-        this.visibleMonths = 1;
-        this.activeView = 'days';
-        this.formatOptions = {
-            month: 'long',
-            weekday: 'narrow',
-        };
-        this.resourceStrings = IgcCalendarResourceStringEN;
-        this.handleKeyDown = (event) => {
-            const tagName = event.target.tagName.toLowerCase();
-            if (tagName !== 'igc-days-view' &&
-                tagName !== 'igc-months-view' &&
-                tagName !== 'igc-years-view') {
-                return;
-            }
-            switch (event.key) {
-                case 'PageDown':
-                    event.preventDefault();
-                    if (event.shiftKey && this.activeView === 'days') {
-                        this.nextYear();
-                    }
-                    else {
-                        this.navigateNext();
-                    }
-                    if (this.activeView === 'days') {
-                        this[focusActiveDate]();
-                    }
-                    break;
-                case 'PageUp':
-                    event.preventDefault();
-                    if (event.shiftKey && this.activeView === 'days') {
-                        this.previousYear();
-                    }
-                    else {
-                        this.navigatePrevious();
-                    }
-                    if (this.activeView === 'days') {
-                        this[focusActiveDate]();
-                    }
-                    break;
-                case 'Home':
-                    event.preventDefault();
-                    if (this.activeView === 'days') {
-                        const firstDaysView = this.daysViews[0];
-                        const activeDate = firstDaysView.activeDate;
-                        const date = new Date(activeDate);
-                        date.setDate(1);
-                        this.activeDate = date;
-                        this.activeDaysViewIndex = 0;
-                    }
-                    else if (this.activeView === 'months') {
-                        const date = new Date(this.activeDate);
-                        date.setMonth(0);
-                        this.activeDate = date;
-                    }
-                    else if (this.activeView === 'years') {
-                        const startYear = calculateYearsRangeStart(this.activeDate, this.yearPerPage);
-                        const date = new Date(this.activeDate);
-                        date.setDate(1);
-                        date.setFullYear(startYear);
-                        setDateSafe(date, this.activeDate.getDate());
-                        this.activeDate = date;
-                    }
-                    this[focusActiveDate]();
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    if (this.activeView === 'days') {
-                        const index = this.daysViews.length - 1;
-                        const lastDaysView = this.daysViews[index];
-                        const activeDate = lastDaysView.activeDate;
-                        const date = new Date(activeDate);
-                        date.setDate(1);
-                        date.setMonth(date.getMonth() + 1);
-                        date.setDate(0);
-                        this.activeDate = date;
-                        this.activeDaysViewIndex = index;
-                    }
-                    else if (this.activeView === 'months') {
-                        const date = new Date(this.activeDate);
-                        date.setMonth(11);
-                        this.activeDate = date;
-                    }
-                    else if (this.activeView === 'years') {
-                        const startYear = calculateYearsRangeStart(this.activeDate, this.yearPerPage);
-                        const date = new Date(this.activeDate);
-                        date.setDate(1);
-                        date.setFullYear(startYear + this.yearPerPage - 1);
-                        setDateSafe(date, this.activeDate.getDate());
-                        this.activeDate = date;
-                    }
-                    this[focusActiveDate]();
-                    break;
-                case 'ArrowLeft':
-                    event.preventDefault();
-                    if (this.activeView === 'days') {
-                        const date = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Day, -1);
-                        if (this.visibleMonths > 1) {
-                            const activeDayView = this.daysViews[this.activeDaysViewIndex];
-                            const activeMonthDate = activeDayView.activeDate;
-                            if (activeMonthDate.getMonth() !== date.getMonth()) {
-                                this.activeDaysViewIndex =
-                                    this.activeDaysViewIndex > 0 ? this.activeDaysViewIndex - 1 : 0;
-                            }
-                        }
-                        this.activeDate = date;
-                    }
-                    else if (this.activeView === 'months') {
-                        this.previousMonth();
-                    }
-                    else if (this.activeView === 'years') {
-                        this.previousYear();
-                    }
-                    this[focusActiveDate]();
-                    break;
-                case 'ArrowRight':
-                    event.preventDefault();
-                    if (this.activeView === 'days') {
-                        const date = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Day, 1);
-                        if (this.visibleMonths > 1) {
-                            const activeDayView = this.daysViews[this.activeDaysViewIndex];
-                            const activeMonthDate = activeDayView.activeDate;
-                            if (activeMonthDate.getMonth() !== date.getMonth()) {
-                                this.activeDaysViewIndex =
-                                    this.activeDaysViewIndex === this.visibleMonths - 1
-                                        ? this.activeDaysViewIndex
-                                        : this.activeDaysViewIndex + 1;
-                            }
-                        }
-                        this.activeDate = date;
-                    }
-                    else if (this.activeView === 'months') {
-                        this.nextMonth();
-                    }
-                    else if (this.activeView === 'years') {
-                        this.nextYear();
-                    }
-                    this[focusActiveDate]();
-                    break;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    if (this.activeView === 'days') {
-                        const date = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Week, -1);
-                        if (this.visibleMonths > 1) {
-                            const activeDayView = this.daysViews[this.activeDaysViewIndex];
-                            const activeMonthDate = activeDayView.activeDate;
-                            if (activeMonthDate.getMonth() !== date.getMonth()) {
-                                this.activeDaysViewIndex =
-                                    this.activeDaysViewIndex > 0 ? this.activeDaysViewIndex - 1 : 0;
-                            }
-                        }
-                        this.activeDate = date;
-                    }
-                    else if (this.activeView === 'months') {
-                        this.activeDate = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Month, -MONTHS_PER_ROW);
-                    }
-                    else if (this.activeView === 'years') {
-                        this.activeDate = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Year, -YEARS_PER_ROW);
-                    }
-                    this[focusActiveDate]();
-                    break;
-                case 'ArrowDown':
-                    event.preventDefault();
-                    if (this.activeView === 'days') {
-                        const date = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Week, 1);
-                        if (this.visibleMonths > 1) {
-                            const activeDayView = this.daysViews[this.activeDaysViewIndex];
-                            const activeMonthDate = activeDayView.activeDate;
-                            if (activeMonthDate.getMonth() !== date.getMonth()) {
-                                this.activeDaysViewIndex =
-                                    this.activeDaysViewIndex === this.visibleMonths - 1
-                                        ? this.activeDaysViewIndex
-                                        : this.activeDaysViewIndex + 1;
-                            }
-                        }
-                        this.activeDate = date;
-                    }
-                    else if (this.activeView === 'months') {
-                        this.activeDate = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Month, MONTHS_PER_ROW);
-                    }
-                    else if (this.activeView === 'years') {
-                        this.activeDate = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Year, YEARS_PER_ROW);
-                    }
-                    this[focusActiveDate]();
-                    break;
-            }
-        };
-        this.initFormatters();
+    get _isMonthView() {
+        return this.activeView === 'months';
     }
-    get yearPerPage() {
-        return this.size === 'small' ? 18 : 15;
+    get _isYearView() {
+        return this.activeView === 'years';
     }
     get previousButtonLabel() {
-        return this.activeView === 'days'
-            ? this.resourceStrings.previousMonth
-            : this.activeView === 'months'
-                ? this.resourceStrings.previousYear
-                : this.activeView === 'years'
-                    ? this.resourceStrings.previousYears.replace('{0}', this.yearPerPage.toString())
-                    : '';
+        if (this._isDayView) {
+            return this.resourceStrings.previousMonth;
+        }
+        if (this._isMonthView) {
+            return this.resourceStrings.previousYear;
+        }
+        return formatString(this.resourceStrings.previousYears, YEARS_PER_PAGE);
     }
     get nextButtonLabel() {
-        return this.activeView === 'days'
-            ? this.resourceStrings.nextMonth
-            : this.activeView === 'months'
-                ? this.resourceStrings.nextYear
-                : this.activeView === 'years'
-                    ? this.resourceStrings.nextYears.replace('{0}', this.yearPerPage.toString())
-                    : '';
-    }
-    monthSelectLabel(activeDate) {
-        return `${activeDate.toLocaleString(this.locale, {
-            month: 'long',
-        })}, ${this.resourceStrings.selectMonth}`;
-    }
-    yearSelectLabel(activeDate) {
-        return `${activeDate.getFullYear()}, ${this.resourceStrings.selectYear}`;
+        if (this._isDayView) {
+            return this.resourceStrings.nextMonth;
+        }
+        if (this._isMonthView) {
+            return this.resourceStrings.nextYear;
+        }
+        return formatString(this.resourceStrings.nextYears, YEARS_PER_PAGE);
+    }
+    localeChange() {
+        this._intl.locale = this.locale;
+    }
+    formatOptionsChange() {
+        this._intl.update({
+            month: {
+                month: this.formatOptions.month,
+            },
+        });
     }
     async [focusActiveDate]() {
         await this.updateComplete;
-        if (this.activeView === 'days') {
-            const daysView = this.daysViews[this.activeDaysViewIndex];
-            daysView.focusActiveDate();
+        if (this._isDayView) {
+            return this.daysViews.item(this.activeDaysViewIndex).focusActiveDate();
         }
-        else if (this.activeView === 'months') {
-            this.monthsView.focusActiveDate();
+        if (this._isMonthView) {
+            return this.monthsView.focusActiveDate();
         }
-        else if (this.activeView === 'years') {
-            this.yearsView.focusActiveDate();
+        if (this._isYearView) {
+            return this.yearsView.focusActiveDate();
         }
     }
-    initFormatters() {
-        this.formatterMonth = new Intl.DateTimeFormat(this.locale, {
-            month: this.formatOptions.month,
-        });
-        this.formatterWeekday = new Intl.DateTimeFormat(this.locale, {
-            weekday: 'short',
-        });
-        this.formatterMonthDay = new Intl.DateTimeFormat(this.locale, {
-            month: 'short',
-            day: 'numeric',
-        });
+    updateViewIndex(date, delta) {
+        if (this.visibleMonths === 1)
+            return;
+        const index = this.activeDaysViewIndex;
+        const view = CalendarDay.from(this.daysViews.item(index).activeDate);
+        if (date.month !== view.month) {
+            this.activeDaysViewIndex = clamp(index + delta, 0, this.visibleMonths - 1);
+        }
     }
-    formattedMonth(value) {
-        return this.formatterMonth.format(value);
+    getSubsequentActiveDate(start, delta) {
+        const disabled = this._disabledDates;
+        let beginning = start.clone();
+        while (isDateInRanges(beginning, disabled)) {
+            beginning = beginning.add('day', delta);
+        }
+        return beginning;
     }
-    changeValue(event) {
-        event.stopPropagation();
-        const daysView = event.target;
-        let newValue;
-        if (this.selection === 'single') {
-            this.value = daysView.value;
-            newValue = this.value;
+    handleArrowKey(period, delta) {
+        if (this._isDayView) {
+            const date = this.getSubsequentActiveDate(this._activeDate.add(period, delta), delta);
+            this.updateViewIndex(date, delta);
+            this._activeDate = date;
         }
         else {
-            this.values = daysView.values;
-            newValue = this.values;
+            const monthOrYear = this._isMonthView ? 'month' : 'year';
+            const monthOrYearDelta = (this._isMonthView ? MONTHS_PER_ROW : YEARS_PER_ROW) * delta;
+            this._activeDate = this.getSubsequentActiveDate(this._activeDate.add(monthOrYear, period === 'week' ? monthOrYearDelta : delta), delta);
         }
-        this.emitEvent('igcChange', { detail: newValue });
-    }
-    changeMonth(event) {
-        event.stopPropagation();
-        this.activeDate = event.target.value;
-        this.activeView = 'days';
         this[focusActiveDate]();
     }
-    changeYear(event) {
-        event.stopPropagation();
-        this.activeDate = event.target.value;
-        this.activeView = 'months';
+    onPageKeys(delta) {
+        const unit = this._isDayView ? 'month' : 'year';
+        const increment = (this._isYearView ? YEARS_PER_PAGE : 1) * delta;
+        this._activeDate = this.getSubsequentActiveDate(this._activeDate.add(unit, increment), increment);
         this[focusActiveDate]();
     }
-    async switchToMonths(daysViewIndex) {
-        this.activateDaysView(daysViewIndex);
-        this.activeView = 'months';
-        await this.updateComplete;
-        this[focusActiveDate]();
+    onShiftPageKeys(delta) {
+        if (this._isDayView) {
+            this._activeDate = this.getSubsequentActiveDate(this._activeDate.add('year', delta), delta);
+            this[focusActiveDate]();
+        }
     }
-    async switchToYears(daysViewIndex) {
-        if (this.activeView === 'days') {
-            this.activateDaysView(daysViewIndex);
+    onHomeKey() {
+        if (this._isDayView) {
+            const first = CalendarDay.from(this.daysViews.item(0).activeDate);
+            this._activeDate = this.getSubsequentActiveDate(first.set({ date: 1 }), 1);
+            this.activeDaysViewIndex = 0;
+        }
+        if (this._isMonthView) {
+            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({ month: 0 }), 1);
+        }
+        if (this._isYearView) {
+            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({
+                year: getYearRange(this._activeDate, YEARS_PER_PAGE).start,
+            }), 1);
         }
-        this.activeView = 'years';
-        await this.updateComplete;
         this[focusActiveDate]();
     }
-    activateDaysView(daysViewIndex) {
-        const activeDaysView = this.daysViews[daysViewIndex];
-        this.activeDate = activeDaysView.activeDate;
-        this.activeDaysViewIndex = daysViewIndex;
-    }
-    activeDateChanged(event) {
-        const day = event.detail;
-        const daysViews = Array.from(this.daysViews);
-        this.activeDaysViewIndex = daysViews.indexOf(event.target);
-        this.activeDate = day.date;
-        if (!day.isCurrentMonth) {
-            this[focusActiveDate]();
+    onEndKey() {
+        if (this._isDayView) {
+            const index = this.daysViews.length - 1;
+            const last = CalendarDay.from(this.daysViews.item(index).activeDate);
+            this._activeDate = this.getSubsequentActiveDate(last.set({ month: last.month + 1, date: 0 }), -1);
+            this.activeDaysViewIndex = index;
         }
+        if (this._isMonthView) {
+            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({ month: 11 }), -1);
+        }
+        if (this._isYearView) {
+            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({
+                year: getYearRange(this._activeDate, YEARS_PER_PAGE).end,
+            }), -1);
+        }
+        this[focusActiveDate]();
     }
-    rangePreviewDateChange(event) {
-        this.rangePreviewDate = event.detail;
-    }
-    nextMonth() {
-        this.activeDate = this.calendarModel.getNextMonth(this.activeDate);
-    }
-    previousMonth() {
-        this.activeDate = this.calendarModel.getPrevMonth(this.activeDate);
-    }
-    nextYear() {
-        this.activeDate = this.calendarModel.getNextYear(this.activeDate);
+    isNotFromCalendarView(_, event) {
+        return !findElementFromEventPath(`${IgcDaysViewComponent.tagName}, ${IgcMonthsViewComponent.tagName}, ${IgcYearsViewComponent.tagName}`, event);
     }
-    previousYear() {
-        this.activeDate = this.calendarModel.getPrevYear(this.activeDate);
+    constructor() {
+        super();
+        this.contentRef = createRef();
+        this.activeDaysViewIndex = 0;
+        this.hideOutsideDays = false;
+        this.hideHeader = false;
+        this.headerOrientation = 'horizontal';
+        this.orientation = 'horizontal';
+        this.visibleMonths = 1;
+        this.activeView = 'days';
+        this.formatOptions = { month: 'long', weekday: 'narrow' };
+        this.resourceStrings = IgcCalendarResourceStringEN;
+        this._intl = createDateTimeFormatters(this.locale, {
+            month: {
+                month: this.formatOptions.month,
+            },
+            monthLabel: { month: 'long' },
+            weekday: { weekday: 'short' },
+            monthDay: { month: 'short', day: 'numeric' },
+            yearLabel: { month: 'long', year: 'numeric' },
+        });
+        addKeybindings(this, {
+            skip: this.isNotFromCalendarView,
+            ref: this.contentRef,
+            bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
+        })
+            .set(arrowLeft, this.handleArrowKey.bind(this, 'day', -1))
+            .set(arrowRight, this.handleArrowKey.bind(this, 'day', 1))
+            .set(arrowUp, this.handleArrowKey.bind(this, 'week', -1))
+            .set(arrowDown, this.handleArrowKey.bind(this, 'week', 1))
+            .set([shiftKey, pageUpKey], this.onShiftPageKeys.bind(this, -1))
+            .set([shiftKey, pageDownKey], this.onShiftPageKeys.bind(this, 1))
+            .set(pageUpKey, this.onPageKeys.bind(this, -1))
+            .set(pageDownKey, this.onPageKeys.bind(this, 1))
+            .set(homeKey, this.onHomeKey)
+            .set(endKey, this.onEndKey);
     }
-    nextYearsPage() {
-        this.activeDate = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Year, this.yearPerPage);
+    renderNavigationButtons() {
+        const parts = partNameMap({
+            'navigation-button': true,
+            vertical: this.orientation === 'vertical',
+        });
+        return html `
+      <div part="navigation-buttons">
+        <button
+          part=${parts}
+          aria-label=${this.previousButtonLabel}
+          @click=${this.navigatePrevious}
+        >
+          <igc-icon
+            aria-hidden="true"
+            name="arrow_prev"
+            collection="default"
+          ></igc-icon>
+        </button>
+
+        <button
+          part=${parts}
+          aria-label=${this.nextButtonLabel}
+          @click=${this.navigateNext}
+        >
+          <igc-icon
+            aria-hidden="true"
+            name="arrow_next"
+            collection="default"
+          ></igc-icon>
+        </button>
+      </div>
+    `;
     }
-    previousYearsPage() {
-        this.activeDate = this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Year, -this.yearPerPage);
+    renderMonthButtonNavigation(active, viewIndex) {
+        const labelFmt = this._intl.get('monthLabel').format;
+        const valueFmt = this._intl.get('month').format;
+        const ariaLabel = `${labelFmt(active.native)}, ${this.resourceStrings.selectMonth}`;
+        return html `
+      <button
+        part="months-navigation"
+        aria-label=${ariaLabel}
+        @click=${() => this.switchToMonths(viewIndex)}
+      >
+        ${valueFmt(active.native)}
+      </button>
+    `;
     }
-    navigateNext() {
-        if (this.activeView === 'days') {
-            this.nextMonth();
-        }
-        else if (this.activeView === 'months') {
-            this.nextYear();
-        }
-        else if (this.activeView === 'years') {
-            this.nextYearsPage();
-        }
+    renderYearButtonNavigation(active, viewIndex) {
+        const fmt = this._intl.get('yearLabel').format;
+        const ariaLabel = `${active.year}, ${this.resourceStrings.selectYear}`;
+        const ariaSkip = this._isDayView ? fmt(active.native) : active.year;
+        return html `
+      <span class="aria-off-screen" aria-live="polite">${ariaSkip}</span>
+      <button
+        part="years-navigation"
+        aria-label=${ariaLabel}
+        @click=${() => this.switchToYears(viewIndex)}
+      >
+        ${active.year}
+      </button>
+    `;
     }
-    navigatePrevious() {
-        if (this.activeView === 'days') {
-            this.previousMonth();
-        }
-        else if (this.activeView === 'months') {
-            this.previousYear();
-        }
-        else if (this.activeView === 'years') {
-            this.previousYearsPage();
-        }
+    renderYearRangeNavigation(active) {
+        const { start, end } = getYearRange(active, YEARS_PER_PAGE);
+        return html `
+      <span part="years-range" aria-live="polite"> ${start} - ${end} </span>
+    `;
     }
-    renderNavigation(activeDate = this.activeDate, renderButtons = true, daysViewIndex = 0) {
-        let startYear = undefined;
-        let endYear = undefined;
-        const prev_icon = this[themeSymbol] === 'fluent' ? 'arrow_upward' : 'navigate_before';
-        const next_icon = this[themeSymbol] === 'fluent' ? 'arrow_downward' : 'navigate_next';
-        if (this.activeView === 'years') {
-            startYear = calculateYearsRangeStart(activeDate, this.yearPerPage);
-            endYear = startYear + this.yearPerPage - 1;
-        }
-        return html `<div part="navigation">
-      <div part="picker-dates">
-        ${this.activeView === 'days'
-            ? html `<button
-              part="months-navigation"
-              aria-label=${this.monthSelectLabel(activeDate)}
-              @click=${() => this.switchToMonths(daysViewIndex)}
-            >
-              ${this.formattedMonth(activeDate)}
-            </button>`
-            : ''}
-        ${this.activeView === 'days' || this.activeView === 'months'
-            ? html `<span class="aria-off-screen" aria-live="polite">
-                ${this.activeView === 'days'
-                ? activeDate.toLocaleString(this.locale, {
-                    month: 'long',
-                    year: 'numeric',
-                })
-                : activeDate.getFullYear()}
-              </span>
-              <button
-                part="years-navigation"
-                aria-label=${this.yearSelectLabel(activeDate)}
-                @click=${() => this.switchToYears(daysViewIndex)}
-              >
-                ${activeDate.getFullYear()}
-              </button>`
-            : ''}
-        ${this.activeView === 'years'
-            ? html `<span part="years-range" aria-live="polite"
-              >${`${startYear} - ${endYear}`}</span
-            >`
-            : ''}
+    renderNavigation(date, showButtons = true, viewIndex = 0) {
+        const activeDate = date ?? this._activeDate;
+        return html `
+      <div part="navigation">
+        <div part="picker-dates">
+          ${this._isDayView
+            ? this.renderMonthButtonNavigation(activeDate, viewIndex)
+            : nothing}
+          ${this._isDayView || this._isMonthView
+            ? this.renderYearButtonNavigation(activeDate, viewIndex)
+            : nothing}
+          ${this._isYearView
+            ? this.renderYearRangeNavigation(activeDate)
+            : nothing}
+        </div>
+        ${showButtons ? this.renderNavigationButtons() : nothing}
       </div>
-      ${renderButtons
-            ? html `<div part="navigation-buttons">
-            <button
-              part=${partNameMap({
-                'navigation-button': true,
-                vertical: this.orientation === 'vertical',
-            })}
-              aria-label=${this.previousButtonLabel}
-              @click=${this.navigatePrevious}
-            >
-              <igc-icon
-                aria-hidden="true"
-                name=${prev_icon}
-                collection="internal"
-              ></igc-icon>
-            </button>
-            <button
-              part=${partNameMap({
-                'navigation-button': true,
-                vertical: this.orientation === 'vertical',
-            })}
-              aria-label=${this.nextButtonLabel}
-              @click=${this.navigateNext}
-            >
-              <igc-icon
-                aria-hidden="true"
-                name=${next_icon}
-                collection="internal"
-              ></igc-icon>
-            </button>
-          </div>`
-            : ''}
-    </div>`;
+    `;
     }
     renderHeader() {
-        if (this.hideHeader || this.selection === 'multiple') {
-            return '';
+        if (this.hideHeader || this._isMultiple) {
+            return nothing;
         }
-        return html `<div part="header">
-      <h5 part="header-title">
-        <slot name="title"
-          >${this.selection === 'single'
+        const title = this._isSingle
             ? this.resourceStrings.selectDate
-            : this.resourceStrings.selectRange}</slot
-        >
-      </h5>
-      <h2 part="header-date">${this.renderHeaderDate()}</h2>
-    </div>`;
+            : this.resourceStrings.selectRange;
+        return html `
+      <div part="header">
+        <h5 part="header-title">
+          <slot name="title">${title}</slot>
+        </h5>
+        <h2 part="header-date">${this.renderHeaderDate()}</h2>
+      </div>
+    `;
     }
-    renderHeaderDate() {
-        if (this.selection === 'single') {
-            const date = this.value;
-            return html `${date
-                ? html `${this.formatterWeekday.format(date)},${this
-                    .headerOrientation === 'vertical'
-                    ? html `<br />`
-                    : ' '}${this.formatterMonthDay.format(date)}`
-                : this.resourceStrings.selectedDate}`;
-        }
-        const dates = this.values;
-        return html `<span
-        >${dates?.length
-            ? this.formatterMonthDay.format(dates[0])
-            : this.resourceStrings.startDate}</span
-      >
+    renderHeaderDateSingle() {
+        const date = this.value;
+        const weekDayFmt = this._intl.get('weekday').format;
+        const monthDayFmt = this._intl.get('monthDay').format;
+        const separator = this.headerOrientation === 'vertical' ? html `<br />` : ' ';
+        return date
+            ? html `${weekDayFmt(date)},${separator}${monthDayFmt(date)}`
+            : this.resourceStrings.selectedDate;
+    }
+    renderHeaderDateRange() {
+        const values = this.values;
+        const fmt = this._intl.get('monthDay').format;
+        const { startDate, endDate } = this.resourceStrings;
+        const start = this._hasValues ? fmt(first(values)) : startDate;
+        const end = this._hasValues && values.length > 1 ? fmt(last(values)) : endDate;
+        return html `
+      <span>${start}</span>
       <span> - </span>
-      <span
-        >${dates && dates.length > 1
-            ? this.formatterMonthDay.format(dates[dates.length - 1])
-            : this.resourceStrings.endDate}</span
-      >`;
+      <span>${end}</span>
+    `;
+    }
+    renderHeaderDate() {
+        return this._isSingle
+            ? this.renderHeaderDateSingle()
+            : this.renderHeaderDateRange();
+    }
+    renderDaysView() {
+        const activeDates = this.getActiveDates();
+        const horizontal = this.orientation === 'horizontal';
+        const length = activeDates.length - 1;
+        const format = this.formatOptions
+            .weekday;
+        return html `${activeDates.map((date, idx) => html `
+        <div part="days-view-container">
+          ${this.renderNavigation(date, horizontal ? idx === length : idx === 0, idx)}
+          <igc-days-view
+            @igcChange=${this.changeValue}
+            @igcActiveDateChange=${this.activeDateChanged}
+            @igcRangePreviewDateChange=${this.rangePreviewDateChanged}
+            part="days-view"
+            exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, weekend, range, special, disabled, single, preview"
+            .active=${this.activeDaysViewIndex === idx}
+            .activeDate=${date.native}
+            .disabledDates=${this.disabledDates}
+            .hideLeadingDays=${this.hideOutsideDays || idx !== 0}
+            .hideTrailingDays=${this.hideOutsideDays || idx !== length}
+            .locale=${this.locale}
+            .rangePreviewDate=${this._rangePreviewDate?.native}
+            .resourceStrings=${this.resourceStrings}
+            .selection=${this.selection}
+            .showWeekNumbers=${this.showWeekNumbers}
+            .specialDates=${this._specialDates}
+            .value=${this.value}
+            .values=${this.values}
+            .weekDayFormat=${format}
+            .weekStart=${this.weekStart}
+          ></igc-days-view>
+        </div>
+      `)}`;
+    }
+    renderMonthView() {
+        const format = this.formatOptions
+            .month;
+        return html `
+      ${this.renderNavigation()}
+      <igc-months-view
+        part="months-view"
+        exportparts="month, selected, month-inner, current"
+        @igcChange=${this.changeMonth}
+        .value=${this.activeDate}
+        .locale=${this.locale}
+        .monthFormat=${format}
+      ></igc-months-view>
+    `;
+    }
+    renderYearView() {
+        return html `
+      ${this.renderNavigation()}
+      <igc-years-view
+        part="years-view"
+        exportparts="year, selected, year-inner, current"
+        @igcChange=${this.changeYear}
+        .value=${this.activeDate}
+        .yearsPerPage=${YEARS_PER_PAGE}
+      ></igc-years-view>
+    `;
     }
     render() {
-        const activeDates = [];
-        const monthsCount = this.visibleMonths > 1 ? this.visibleMonths : 1;
-        for (let i = 0; i < monthsCount; i++) {
-            activeDates.push(this.calendarModel.timedelta(this.activeDate, TimeDeltaInterval.Month, i - this.activeDaysViewIndex));
-        }
+        const direction = this._isDayView && this.orientation === 'horizontal';
+        const styles = {
+            display: 'flex',
+            flexGrow: 1,
+            flexDirection: direction ? 'row' : 'column',
+        };
         return html `
       ${this.renderHeader()}
-      <div
-        part="content"
-        style=${styleMap({
-            display: 'flex',
-            flexGrow: '1',
-            flexDirection: this.activeView === 'days'
-                ? this.orientation === 'horizontal'
-                    ? 'row'
-                    : 'column'
-                : 'column',
-        })}
-        @keydown=${this.handleKeyDown}
-      >
-        ${this.activeView === 'days'
-            ? activeDates.map((activeDate, i) => html `<div part="days-view-container">
-                  ${this.renderNavigation(activeDate, this.orientation === 'horizontal'
-                ? i === activeDates.length - 1
-                : i === 0, i)}
-                  <igc-days-view
-                    part="days-view"
-                    .active=${this.activeDaysViewIndex === i}
-                    .activeDate=${activeDate}
-                    .weekStart=${this.weekStart}
-                    .weekDayFormat=${this.formatOptions.weekday}
-                    .locale=${this.locale}
-                    .selection=${this.selection}
-                    .value=${this.value}
-                    .values=${this.values}
-                    .hideLeadingDays=${this.hideOutsideDays || i !== 0}
-                    .hideTrailingDays=${this.hideOutsideDays ||
-                i !== activeDates.length - 1}
-                    .showWeekNumbers=${this.showWeekNumbers}
-                    .disabledDates=${this.disabledDates}
-                    .specialDates=${this.specialDates}
-                    .rangePreviewDate=${this.rangePreviewDate}
-                    .resourceStrings=${this.resourceStrings}
-                    exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, weekend, range, special, disabled, single, preview"
-                    @igcChange=${this.changeValue}
-                    @igcActiveDateChange=${this.activeDateChanged}
-                    @igcRangePreviewDateChange=${this.rangePreviewDateChange}
-                  ></igc-days-view>
-                </div>`)
-            : ''}
-        ${this.activeView === 'months'
-            ? html ` ${this.renderNavigation()}
-              <igc-months-view
-                part="months-view"
-                .value=${this.activeDate}
-                .locale=${this.locale}
-                .monthFormat=${this.formatOptions.month}
-                exportparts="month, selected, month-inner, current"
-                @igcChange=${this.changeMonth}
-              ></igc-months-view>`
-            : ''}
-        ${this.activeView === 'years'
-            ? html `${this.renderNavigation()}
-              <igc-years-view
-                part="years-view"
-                .value=${this.activeDate}
-                .yearsPerPage=${this.yearPerPage}
-                exportparts="year, selected, year-inner, current"
-                @igcChange=${this.changeYear}
-              ></igc-years-view>`
-            : ''}
+      <div ${ref(this.contentRef)} part="content" style=${styleMap(styles)}>
+        ${choose(this.activeView, [
+            ['days', () => this.renderDaysView()],
+            ['months', () => this.renderMonthView()],
+            ['years', () => this.renderYearView()],
+        ])}
       </div>
     `;
     }
+    changeMonth(event) {
+        event.stopPropagation();
+        this.activeDate = event.detail;
+        this.activeView = 'days';
+        this[focusActiveDate]();
+    }
+    changeYear(event) {
+        event.stopPropagation();
+        this.activeDate = event.detail;
+        this.activeView = 'months';
+        this[focusActiveDate]();
+    }
+    changeValue(event) {
+        event.stopPropagation();
+        const view = event.target;
+        if (this._isSingle) {
+            this.value = view.value;
+        }
+        else {
+            this.values = view.values;
+        }
+        this.emitEvent('igcChange', {
+            detail: this._isSingle ? this.value : this.values,
+        });
+    }
+    activeDateChanged(event) {
+        const view = event.target;
+        const views = Array.from(this.daysViews);
+        this.activeDaysViewIndex = views.indexOf(view);
+        this.activeDate = event.detail;
+        if (!areSameMonth(this.activeDate, view.activeDate)) {
+            this[focusActiveDate]();
+        }
+    }
+    rangePreviewDateChanged(event) {
+        this._rangePreviewDate = event.detail
+            ? CalendarDay.from(event.detail)
+            : undefined;
+    }
+    getActiveDates() {
+        const current = this.activeDaysViewIndex;
+        const length = Math.max(this.visibleMonths, 1);
+        return Array.from({ length }, (_, i) => this._activeDate.add('month', i - current));
+    }
+    activateDaysView(index) {
+        const view = this.daysViews.item(index);
+        this.activeDate = view.activeDate;
+        this.activeDaysViewIndex = index;
+    }
+    navigatePrevious() {
+        const unit = this._isDayView ? 'month' : 'year';
+        const delta = this._isYearView ? YEARS_PER_PAGE : 1;
+        this._activeDate = this._activeDate.add(unit, -delta);
+    }
+    navigateNext() {
+        const unit = this._isDayView ? 'month' : 'year';
+        const delta = this._isYearView ? YEARS_PER_PAGE : 1;
+        this._activeDate = this._activeDate.add(unit, delta);
+    }
+    switchToMonths(viewIndex) {
+        this.activateDaysView(viewIndex);
+        this.activeView = 'months';
+        this[focusActiveDate]();
+    }
+    switchToYears(viewIndex) {
+        if (this._isDayView) {
+            this.activateDaysView(viewIndex);
+        }
+        this.activeView = 'years';
+        this[focusActiveDate]();
+    }
 };
 IgcCalendarComponent.tagName = 'igc-calendar';
 IgcCalendarComponent.styles = styles;
-__decorate([
-    state()
-], IgcCalendarComponent.prototype, "rangePreviewDate", void 0);
 __decorate([
     state()
 ], IgcCalendarComponent.prototype, "activeDaysViewIndex", void 0);
 __decorate([
-    queryAll('igc-days-view')
+    queryAll(IgcDaysViewComponent.tagName)
 ], IgcCalendarComponent.prototype, "daysViews", void 0);
 __decorate([
-    query('igc-months-view')
+    query(IgcMonthsViewComponent.tagName)
 ], IgcCalendarComponent.prototype, "monthsView", void 0);
 __decorate([
-    query('igc-years-view')
+    query(IgcYearsViewComponent.tagName)
 ], IgcCalendarComponent.prototype, "yearsView", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'hide-outside-days' })
+    property({ type: Boolean, attribute: 'hide-outside-days', reflect: true })
 ], IgcCalendarComponent.prototype, "hideOutsideDays", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'hide-header' })
+    property({ type: Boolean, attribute: 'hide-header', reflect: true })
 ], IgcCalendarComponent.prototype, "hideHeader", void 0);
 __decorate([
-    property({ attribute: 'header-orientation', reflect: true })
+    property({ reflect: true, attribute: 'header-orientation' })
 ], IgcCalendarComponent.prototype, "headerOrientation", void 0);
 __decorate([
     property()
@@ -614,9 +515,11 @@ __decorate([
     property({ attribute: false })
 ], IgcCalendarComponent.prototype, "resourceStrings", void 0);
 __decorate([
-    watch('formatOptions'),
     watch('locale')
-], IgcCalendarComponent.prototype, "formattersChange", null);
+], IgcCalendarComponent.prototype, "localeChange", null);
+__decorate([
+    watch('formatOptions')
+], IgcCalendarComponent.prototype, "formatOptionsChange", null);
 IgcCalendarComponent = IgcCalendarComponent_1 = __decorate([
     themes(all)
 ], IgcCalendarComponent);