igniteui-webcomponents 6.4.0-alpha.4 → 6.5.0

package/components/calendar/calendar.js

@@ -4,15 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { getDateFormatter } from 'igniteui-i18n-core';
 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 { addThemingController } from '../../theming/theming-controller.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 { createDateTimeFormatters } from '../common/localization/intl-formatters.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
 import { clamp, findElementFromEventPath, first, formatString, last, } from '../common/util.js';
@@ -41,164 +40,229 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
     get _isYearView() {
         return this.activeView === 'years';
     }
-    get previousButtonLabel() {
-        if (this._isDayView) {
-            return this.resourceStrings.previousMonth;
-        }
-        if (this._isMonthView) {
-            return this.resourceStrings.previousYear;
-        }
-        return formatString(this.resourceStrings.previousYears, YEARS_PER_PAGE);
-    }
-    get nextButtonLabel() {
-        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](options) {
-        await this.updateComplete;
-        if (this._isDayView) {
-            return this.daysViews
-                .item(this.activeDaysViewIndex)
-                .focusActiveDate(options);
-        }
-        if (this._isMonthView) {
-            return this.monthsView.focusActiveDate(options);
-        }
-        if (this._isYearView) {
-            return this.yearsView.focusActiveDate(options);
+    get _previousButtonLabel() {
+        switch (this.activeView) {
+            case 'days':
+                return this.resourceStrings.previousMonth;
+            case 'months':
+                return this.resourceStrings.previousYear;
+            case 'years':
+                return formatString(this.resourceStrings.previousYears, YEARS_PER_PAGE);
+            default:
+                return '';
         }
     }
-    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);
+    get _nextButtonLabel() {
+        switch (this.activeView) {
+            case 'days':
+                return this.resourceStrings.nextMonth;
+            case 'months':
+                return this.resourceStrings.nextYear;
+            case 'years':
+                return formatString(this.resourceStrings.nextYears, YEARS_PER_PAGE);
+            default:
+                return '';
         }
     }
-    getSubsequentActiveDate(start, delta) {
-        const disabled = this._disabledDates;
-        let beginning = start.clone();
-        while (isDateInRanges(beginning, disabled)) {
-            beginning = beginning.add('day', delta);
-        }
-        return beginning;
+    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' };
+        addThemingController(this, all);
+        addKeybindings(this, {
+            skip: this._shouldSkipKeyboardEvent,
+            ref: this._contentRef,
+            bindingDefaults: { 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._handleShiftPageKeys.bind(this, -1))
+            .set([shiftKey, pageDownKey], this._handleShiftPageKeys.bind(this, 1))
+            .set(pageUpKey, this._handlePageKeys.bind(this, -1))
+            .set(pageDownKey, this._handlePageKeys.bind(this, 1))
+            .set(homeKey, this._handleHomeKey)
+            .set(endKey, this._handleEndKey);
+    }
+    _shouldSkipKeyboardEvent(_, event) {
+        return !findElementFromEventPath(`${IgcDaysViewComponent.tagName}, ${IgcMonthsViewComponent.tagName}, ${IgcYearsViewComponent.tagName}`, event);
     }
-    handleArrowKey(period, delta) {
+    _handleArrowKey(period, delta) {
         if (this._isDayView) {
-            const date = this.getSubsequentActiveDate(this._activeDate.add(period, delta), delta);
-            this.updateViewIndex(date, delta);
+            const date = this._getNextEnabledDate(this._activeDate.add(period, delta), delta);
+            this._updateViewIndex(date, delta);
             this._activeDate = date;
         }
         else {
             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._activeDate = this._getNextEnabledDate(this._activeDate.add(monthOrYear, period === 'week' ? monthOrYearDelta : delta), delta);
         }
         this[focusActiveDate]();
     }
-    onPageKeys(delta) {
+    _handlePageKeys(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._activeDate = this._getNextEnabledDate(this._activeDate.add(unit, increment), increment);
         this[focusActiveDate]();
     }
-    onShiftPageKeys(delta) {
+    _handleShiftPageKeys(delta) {
         if (this._isDayView) {
-            this._activeDate = this.getSubsequentActiveDate(this._activeDate.add('year', delta), delta);
+            this._activeDate = this._getNextEnabledDate(this._activeDate.add('year', delta), delta);
             this[focusActiveDate]();
         }
     }
-    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;
+    _handleHomeKey() {
+        switch (this.activeView) {
+            case 'days': {
+                const firstView = CalendarDay.from(this._daysViews.item(0).activeDate);
+                this._activeDate = this._getNextEnabledDate(firstView.set({ date: 1 }), 1);
+                this._activeDaysViewIndex = 0;
+                break;
+            }
+            case 'months':
+                this._activeDate = this._getNextEnabledDate(this._activeDate.set({ month: 0 }), 1);
+                break;
+            case 'years':
+                this._activeDate = this._getNextEnabledDate(this._activeDate.set({
+                    year: getYearRange(this._activeDate, YEARS_PER_PAGE).start,
+                }), 1);
+                break;
+        }
+        this[focusActiveDate]();
+    }
+    _handleEndKey() {
+        switch (this.activeView) {
+            case 'days': {
+                const index = this._daysViews.length - 1;
+                const lastView = CalendarDay.from(this._daysViews.item(index).activeDate);
+                this._activeDate = this._getNextEnabledDate(lastView.set({ month: lastView.month + 1, date: 0 }), -1);
+                this._activeDaysViewIndex = index;
+                break;
+            }
+            case 'months':
+                this._activeDate = this._getNextEnabledDate(this._activeDate.set({ month: 11 }), -1);
+                break;
+            case 'years':
+                this._activeDate = this._getNextEnabledDate(this._activeDate.set({
+                    year: getYearRange(this._activeDate, YEARS_PER_PAGE).end,
+                }), -1);
+                break;
+        }
+        this[focusActiveDate]();
+    }
+    _handleMonthChange(event) {
+        event.stopPropagation();
+        this.activeDate = event.detail;
+        this.activeView = 'days';
+        this[focusActiveDate]();
+    }
+    _handleYearChange(event) {
+        event.stopPropagation();
+        this.activeDate = event.detail;
+        this.activeView = 'months';
+        this[focusActiveDate]();
+    }
+    _handleValueChange(event) {
+        event.stopPropagation();
+        const view = event.target;
+        if (this._isSingle) {
+            this.value = view.value;
         }
-        if (this._isMonthView) {
-            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({ month: 0 }), 1);
+        else {
+            this.values = view.values;
         }
-        if (this._isYearView) {
-            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({
-                year: getYearRange(this._activeDate, YEARS_PER_PAGE).start,
-            }), 1);
+        this.emitEvent('igcChange', {
+            detail: this._isSingle ? this.value : this.values,
+        });
+    }
+    _handleActiveDateChange(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]();
         }
+    }
+    _handleRangePreviewChange(event) {
+        this._rangePreviewDate = event.detail
+            ? CalendarDay.from(event.detail)
+            : undefined;
+    }
+    _setActiveDaysView(viewIndex) {
+        const view = this._daysViews.item(viewIndex);
+        this.activeDate = view.activeDate;
+        this._activeDaysViewIndex = viewIndex;
+    }
+    _navigate(delta) {
+        const unit = this._isDayView ? 'month' : 'year';
+        const increment = (this._isYearView ? YEARS_PER_PAGE : 1) * delta;
+        this._activeDate = this._activeDate.add(unit, increment);
+    }
+    _navigatePrevious() {
+        this._navigate(-1);
+    }
+    _navigateNext() {
+        this._navigate(1);
+    }
+    _navigateToMonthView(viewIndex) {
+        this._setActiveDaysView(viewIndex);
+        this.activeView = 'months';
         this[focusActiveDate]();
     }
-    onEndKey() {
+    _navigateToYearView(viewIndex) {
         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;
+            this._setActiveDaysView(viewIndex);
         }
-        if (this._isMonthView) {
-            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({ month: 11 }), -1);
+        this.activeView = 'years';
+        this[focusActiveDate]();
+    }
+    async [focusActiveDate](options) {
+        await this.updateComplete;
+        switch (this.activeView) {
+            case 'days':
+                return this._daysViews
+                    .item(this._activeDaysViewIndex)
+                    .focusActiveDate(options);
+            case 'months':
+                return this._monthsView.focusActiveDate(options);
+            case 'years':
+                return this._yearsView.focusActiveDate(options);
         }
-        if (this._isYearView) {
-            this._activeDate = this.getSubsequentActiveDate(this._activeDate.set({
-                year: getYearRange(this._activeDate, YEARS_PER_PAGE).end,
-            }), -1);
+    }
+    _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);
         }
-        this[focusActiveDate]();
     }
-    isNotFromCalendarView(_, event) {
-        return !findElementFromEventPath(`${IgcDaysViewComponent.tagName}, ${IgcMonthsViewComponent.tagName}, ${IgcYearsViewComponent.tagName}`, event);
+    _getActiveDates() {
+        const current = this._activeDaysViewIndex;
+        const length = Math.max(this.visibleMonths, 1);
+        return Array.from({ length }, (_, i) => this._activeDate.add('month', i - current));
     }
-    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._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' },
-        });
-        addThemingController(this, all);
-        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);
-    }
-    renderNavigationButtons() {
+    _getNextEnabledDate(start, delta) {
+        const disabled = this._disabledDates;
+        let beginning = start.clone();
+        while (isDateInRanges(beginning, disabled)) {
+            beginning = beginning.add('day', delta);
+        }
+        return beginning;
+    }
+    _renderNavigationButtons() {
         const parts = {
             'navigation-button': true,
             vertical: this.orientation === 'vertical',
@@ -207,8 +271,8 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       <div part="navigation-buttons">
         <button
           part=${partMap(parts)}
-          aria-label=${this.previousButtonLabel}
-          @click=${this.navigatePrevious}
+          aria-label=${this._previousButtonLabel}
+          @click=${this._navigatePrevious}
         >
           <igc-icon
             aria-hidden="true"
@@ -219,8 +283,8 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
 
         <button
           part=${partMap(parts)}
-          aria-label=${this.nextButtonLabel}
-          @click=${this.navigateNext}
+          aria-label=${this._nextButtonLabel}
+          @click=${this._navigateNext}
         >
           <igc-icon
             aria-hidden="true"
@@ -231,61 +295,69 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       </div>
     `;
     }
-    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}`;
+    _renderMonthButtonNavigation(active, viewIndex) {
+        const formatter = getDateFormatter();
+        const label = formatter.formatDateTime(active.native, this.locale, {
+            month: 'long',
+        });
+        const value = formatter.formatDateTime(active.native, this.locale, {
+            month: this.formatOptions.month,
+        });
+        const ariaLabel = `${label}, ${this.resourceStrings.selectMonth}`;
         return html `
       <button
         part="months-navigation"
         aria-label=${ariaLabel}
-        @click=${() => this.switchToMonths(viewIndex)}
+        @click=${() => this._navigateToMonthView(viewIndex)}
       >
-        ${valueFmt(active.native)}
+        ${value}
       </button>
     `;
     }
-    renderYearButtonNavigation(active, viewIndex) {
-        const fmt = this._intl.get('yearLabel').format;
+    _renderYearButtonNavigation(active, viewIndex) {
+        const { format } = getDateFormatter().getIntlFormatter(this.locale, {
+            month: 'long',
+            year: 'numeric',
+        });
         const ariaLabel = `${active.year}, ${this.resourceStrings.selectYear}`;
-        const ariaSkip = this._isDayView ? fmt(active.native) : active.year;
+        const ariaSkip = this._isDayView ? format(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)}
+        @click=${() => this._navigateToYearView(viewIndex)}
       >
         ${active.year}
       </button>
     `;
     }
-    renderYearRangeNavigation(active) {
+    _renderYearRangeNavigation(active) {
         const { start, end } = getYearRange(active, YEARS_PER_PAGE);
         return html `
       <span part="years-range" aria-live="polite"> ${start} - ${end} </span>
     `;
     }
-    renderNavigation(date, showButtons = true, viewIndex = 0) {
+    _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)
+            ? this._renderMonthButtonNavigation(activeDate, viewIndex)
             : nothing}
           ${this._isDayView || this._isMonthView
-            ? this.renderYearButtonNavigation(activeDate, viewIndex)
+            ? this._renderYearButtonNavigation(activeDate, viewIndex)
             : nothing}
           ${this._isYearView
-            ? this.renderYearRangeNavigation(activeDate)
+            ? this._renderYearRangeNavigation(activeDate)
             : nothing}
         </div>
-        ${showButtons ? this.renderNavigationButtons() : nothing}
+        ${showButtons ? this._renderNavigationButtons() : nothing}
       </div>
     `;
     }
-    renderHeader() {
+    _renderHeader() {
         if (this.hideHeader || this._isMultiple) {
             return nothing;
         }
@@ -297,24 +369,33 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
         <h5 part="header-title">
           <slot name="title">${title}</slot>
         </h5>
-        <h2 part="header-date">${this.renderHeaderDate()}</h2>
+        <h2 part="header-date">${this._renderHeaderDate()}</h2>
       </div>
     `;
     }
-    renderHeaderDateSingle() {
+    _renderHeaderDateSingle() {
         const date = this.value ?? CalendarDay.today.native;
-        const day = this._intl.get('weekday').format(date);
-        const month = this._intl.get('monthDay').format(date);
+        const formatter = getDateFormatter();
+        const weekday = formatter.formatDateTime(date, this.locale, {
+            weekday: 'short',
+        });
+        const monthDay = formatter.formatDateTime(date, this.locale, {
+            month: 'short',
+            day: 'numeric',
+        });
         const separator = this.headerOrientation === 'vertical' ? html `<br />` : ' ';
-        const formatted = html `${day},${separator}${month}`;
+        const formatted = html `${weekday},${separator}${monthDay}`;
         return html `<slot name="header-date">${formatted}</slot>`;
     }
-    renderHeaderDateRange() {
+    _renderHeaderDateRange() {
         const values = this.values;
-        const fmt = this._intl.get('monthDay').format;
+        const { format } = getDateFormatter().getIntlFormatter(this.locale, {
+            month: 'short',
+            day: 'numeric',
+        });
         const { startDate, endDate } = this.resourceStrings;
-        const start = this._hasValues ? fmt(first(values)) : startDate;
-        const end = this._hasValues && values.length > 1 ? fmt(last(values)) : endDate;
+        const start = this._hasValues ? format(first(values)) : startDate;
+        const end = this._hasValues && values.length > 1 ? format(last(values)) : endDate;
         return html `
       <slot name="header-date">
         <span>${start}</span>
@@ -323,27 +404,27 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       </slot>
     `;
     }
-    renderHeaderDate() {
+    _renderHeaderDate() {
         return this._isSingle
-            ? this.renderHeaderDateSingle()
-            : this.renderHeaderDateRange();
+            ? this._renderHeaderDateSingle()
+            : this._renderHeaderDateRange();
     }
-    renderDaysView() {
-        const activeDates = this.getActiveDates();
+    _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)}
+          ${this._renderNavigation(date, horizontal ? idx === length : idx === 0, idx)}
           <igc-days-view
-            @igcChange=${this.changeValue}
-            @igcActiveDateChange=${this.activeDateChanged}
-            @igcRangePreviewDateChange=${this.rangePreviewDateChanged}
+            @igcChange=${this._handleValueChange}
+            @igcActiveDateChange=${this._handleActiveDateChange}
+            @igcRangePreviewDateChange=${this._handleRangePreviewChange}
             part="days-view"
             exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, content-vertical, weekend, range, special, disabled, single, preview"
-            .active=${this.activeDaysViewIndex === idx}
+            .active=${this._activeDaysViewIndex === idx}
             .activeDate=${date.native}
             .disabledDates=${this.disabledDates}
             .hideLeadingDays=${this.hideOutsideDays || idx !== 0}
@@ -362,28 +443,28 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
         </div>
       `)}`;
     }
-    renderMonthView() {
+    _renderMonthView() {
         const format = this.formatOptions
             .month;
         return html `
-      ${this.renderNavigation()}
+      ${this._renderNavigation()}
       <igc-months-view
         part="months-view"
         exportparts="month, selected, month-inner, current"
-        @igcChange=${this.changeMonth}
+        @igcChange=${this._handleMonthChange}
         .value=${this.activeDate}
         .locale=${this.locale}
         .monthFormat=${format}
       ></igc-months-view>
     `;
     }
-    renderYearView() {
+    _renderYearView() {
         return html `
-      ${this.renderNavigation()}
+      ${this._renderNavigation()}
       <igc-years-view
         part="years-view"
         exportparts="year, selected, year-inner, current"
-        @igcChange=${this.changeYear}
+        @igcChange=${this._handleYearChange}
         .value=${this.activeDate}
         .yearsPerPage=${YEARS_PER_PAGE}
       ></igc-years-view>
@@ -395,100 +476,29 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
             'content-vertical': this._isDayView && this.orientation === 'vertical',
         };
         return html `
-      ${this.renderHeader()}
-      <div ${ref(this.contentRef)} part=${partMap(parts)}>
+      ${this._renderHeader()}
+      <div ${ref(this._contentRef)} part=${partMap(parts)}>
         ${choose(this.activeView, [
-            ['days', () => this.renderDaysView()],
-            ['months', () => this.renderMonthView()],
-            ['years', () => this.renderYearView()],
+            ['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]();
-    }
 }
 __decorate([
     state()
-], IgcCalendarComponent.prototype, "activeDaysViewIndex", void 0);
+], IgcCalendarComponent.prototype, "_activeDaysViewIndex", void 0);
 __decorate([
     queryAll(IgcDaysViewComponent.tagName)
-], IgcCalendarComponent.prototype, "daysViews", void 0);
+], IgcCalendarComponent.prototype, "_daysViews", void 0);
 __decorate([
     query(IgcMonthsViewComponent.tagName)
-], IgcCalendarComponent.prototype, "monthsView", void 0);
+], IgcCalendarComponent.prototype, "_monthsView", void 0);
 __decorate([
     query(IgcYearsViewComponent.tagName)
-], IgcCalendarComponent.prototype, "yearsView", void 0);
+], IgcCalendarComponent.prototype, "_yearsView", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'hide-outside-days', reflect: true })
 ], IgcCalendarComponent.prototype, "hideOutsideDays", void 0);
@@ -510,10 +520,4 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], IgcCalendarComponent.prototype, "formatOptions", void 0);
-__decorate([
-    watch('locale')
-], IgcCalendarComponent.prototype, "localeChange", null);
-__decorate([
-    watch('formatOptions')
-], IgcCalendarComponent.prototype, "formatOptionsChange", null);
 //# sourceMappingURL=calendar.js.map