igniteui-webcomponents 4.11.0 → 5.0.0-rc.0

package/components/calendar/days-view/days-view.js

@@ -5,415 +5,345 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcDaysViewComponent_1;
-import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { themes } from '../../../theming/theming-decorator.js';
+import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.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 { partNameMap } from '../../common/util.js';
-import { IgcCalendarBaseComponent, } from '../common/calendar-base.js';
-import { DateRangeType, TimeDeltaInterval, isDateInRanges, } from '../common/calendar.model.js';
-import { areEqualDates, getDateOnly, isEqual } from '../common/utils.js';
+import { chunk, first, last, partNameMap, take } from '../../common/util.js';
+import { IgcCalendarBaseComponent } from '../base.js';
+import { areSameMonth, calendarRange, generateMonth, getViewElement, isDateInRanges, isNextMonth, isPreviousMonth, } from '../helpers.js';
+import { CalendarDay, daysInWeek } from '../model.js';
 import { styles } from '../themes/days-view.base.css.js';
 import { all } from '../themes/days.js';
+import { DateRangeType } from '../types.js';
 let IgcDaysViewComponent = IgcDaysViewComponent_1 = class IgcDaysViewComponent extends EventEmitterMixin(IgcCalendarBaseComponent) {
     static register() {
         registerComponent(IgcDaysViewComponent_1);
     }
-    formattersChange() {
-        this.initFormatters();
+    set rangePreviewDate(value) {
+        this._rangePreviewDate = value ? CalendarDay.from(value) : undefined;
+    }
+    get rangePreviewDate() {
+        return this._rangePreviewDate?.native;
+    }
+    localeChange() {
+        this._intl.locale = this.locale;
+    }
+    weekDayFormatChange() {
+        this._intl.update({ weekday: { weekday: this.weekDayFormat } });
     }
     datesChange() {
-        this.dates = this.getCalendarMonth();
+        this.dates = Array.from(generateMonth(this._activeDate, this._firstDayOfWeek));
     }
     constructor() {
         super();
+        this.active = false;
         this.hideLeadingDays = false;
         this.hideTrailingDays = false;
-        this.active = false;
-        this.weekDayFormat = 'narrow';
         this.resourceStrings = IgcCalendarResourceStringEN;
-        this.setAttribute('role', 'grid');
-        this.initFormatters();
-    }
-    focusActiveDate() {
-        this.activeDay.focus();
-    }
-    initFormatters() {
-        this.formatterWeekday = new Intl.DateTimeFormat(this.locale, {
-            weekday: this.weekDayFormat,
-        });
-        this.labelFormatter = new Intl.DateTimeFormat(this.locale, {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
+        this.weekDayFormat = 'narrow';
+        this._intl = createDateTimeFormatters(this.locale, {
+            weekday: { weekday: this.weekDayFormat },
+            label: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
+            ariaWeekday: { weekday: 'long' },
         });
+        addKeybindings(this, {
+            bindingDefaults: { preventDefault: true },
+        }).setActivateHandler(this.handleInteraction);
+        this.addEventListener('click', this.handleInteraction);
     }
-    generateWeekHeader() {
-        const dayNames = [];
-        const rv = this.calendarModel.monthdatescalendar(this.activeDate.getFullYear(), this.activeDate.getMonth())[0];
-        for (const day of rv) {
-            dayNames.push({
-                label: this.formatterWeekday.format(day.date),
-                ariaLabel: day.date.toLocaleString(this.locale, { weekday: 'long' }),
-            });
-        }
-        return dayNames;
-    }
-    getCalendarMonth() {
-        return this.calendarModel.monthdatescalendar(this.activeDate.getFullYear(), this.activeDate.getMonth(), true);
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'grid';
     }
-    titleCase(str) {
-        return str.charAt(0).toUpperCase() + str.slice(1);
-    }
-    getWeekNumber(date) {
-        return this.calendarModel.getWeekNumber(date);
-    }
-    formattedDate(value) {
-        return `${value.getDate()}`;
-    }
-    get isSingleSelection() {
-        return this.selection !== 'range';
+    focusActiveDate() {
+        this.activeDay.focus();
     }
-    isLastInRange(date) {
-        if (this.isSingleSelection || !this.values || this.values.length === 0) {
-            return false;
-        }
-        const dates = this.values;
-        let lastDate = dates[dates.length - 1];
-        if (this.rangePreviewDate) {
-            if (this.rangePreviewDate > lastDate) {
-                lastDate = this.rangePreviewDate;
+    handleInteraction(event) {
+        const value = getViewElement(event);
+        if (value > -1) {
+            const date = CalendarDay.from(new Date(value));
+            if (this._rangePreviewDate) {
+                this.setRangePreviewDate();
+            }
+            if (this.selectDate(date)) {
+                this.emitEvent('igcChange', { detail: date.native });
+            }
+            if (event.type === 'click') {
+                event.stopPropagation();
+                this.emitEvent('igcActiveDateChange', { detail: date.native });
+                this._activeDate = date;
             }
         }
-        return isEqual(lastDate, date.date);
     }
-    isFirstInRange(date) {
-        if (this.isSingleSelection || !this.values || this.values.length === 0) {
-            return false;
+    _selectMultiple(day) {
+        const values = this._values;
+        const idx = values.findIndex((v) => v.equalTo(day));
+        idx < 0 ? values.push(day) : values.splice(idx, 1);
+        values.sort((a, b) => a.timestamp - b.timestamp);
+        this._values = Array.from(values);
+    }
+    _selectRange(day) {
+        let values = this._values;
+        if (values.length !== 1) {
+            values = [day];
         }
-        const dates = this.values;
-        let firstDate = dates[0];
-        if (this.rangePreviewDate) {
-            if (this.rangePreviewDate < firstDate) {
-                firstDate = this.rangePreviewDate;
+        else {
+            const beginning = first(values);
+            if (beginning.equalTo(day)) {
+                this._values = [];
+                return;
             }
+            values = beginning.greaterThan(day)
+                ? Array.from(calendarRange({ start: day, end: beginning }))
+                : Array.from(calendarRange({ start: beginning, end: day }));
+            values.push(last(values).add('day', 1));
         }
-        return isEqual(firstDate, date.date);
+        this._values = values.filter((v) => !isDateInRanges(v, this._disabledDates));
     }
-    isDisabled(date) {
-        if (!this.disabledDates) {
-            return false;
-        }
-        return isDateInRanges(date, this.disabledDates);
-    }
-    isWithinRange(date, min, max) {
-        return isDateInRanges(date, [
-            {
-                type: DateRangeType.Between,
-                dateRange: [min, max],
-            },
-        ]);
-    }
-    isRangeDate(date) {
-        if (this.selection !== 'range' ||
-            !this.values ||
-            this.values.length === 0) {
+    selectDate(value) {
+        if (isDateInRanges(value, this._disabledDates)) {
             return false;
         }
-        const dates = this.values;
-        const min = dates[0];
-        let max;
-        if (dates.length === 1) {
-            if (!this.rangePreviewDate) {
+        if (this._isSingle) {
+            if (this._value?.equalTo(value)) {
                 return false;
             }
-            max = this.rangePreviewDate;
+            this._value = value;
         }
-        else {
-            max = dates[dates.length - 1];
+        if (this._isMultiple) {
+            this._selectMultiple(value);
         }
-        return isDateInRanges(date, [
-            {
-                type: DateRangeType.Between,
-                dateRange: [min, max],
-            },
-        ]);
-    }
-    isRangePreview(date) {
-        if (this.selection === 'range' &&
-            this.values &&
-            this.values.length > 0 &&
-            this.rangePreviewDate) {
-            return isDateInRanges(date, [
-                {
-                    type: DateRangeType.Between,
-                    dateRange: [this.values[0], this.rangePreviewDate],
-                },
-            ]);
+        if (this._isRange) {
+            this._selectRange(value);
         }
-        return false;
+        return true;
     }
-    isSelected(date) {
-        if (this.isDisabled(date.date)) {
+    isSelected(day) {
+        if (isDateInRanges(day, this._disabledDates)) {
             return false;
         }
-        if (this.selection === 'single') {
-            if (!this.value) {
-                return false;
-            }
-            return getDateOnly(this.value).getTime() === date.date.getTime();
+        if (this._isSingle) {
+            return !!this._value && this._value.equalTo(day);
         }
-        if (!this.values || this.values.length === 0) {
+        if (!this._hasValues) {
             return false;
         }
-        if (this.selection === 'range' && this.values.length === 1) {
-            return getDateOnly(this.values[0]).getTime() === date.date.getTime();
-        }
-        if (this.selection === 'multiple') {
-            const start = getDateOnly(this.values[0]);
-            const end = getDateOnly(this.values[this.values.length - 1]);
-            if (this.isWithinRange(date.date, start, end)) {
-                const currentDate = this.values.find((element) => element.getTime() === date.date.getTime());
-                return !!currentDate;
-            }
-            return false;
+        if (this._isMultiple) {
+            return isDateInRanges(day, [
+                {
+                    type: DateRangeType.Specific,
+                    dateRange: this.values,
+                },
+            ]);
         }
-        return this.isWithinRange(date.date, this.values[0], this.values[this.values.length - 1]);
-    }
-    isToday(day) {
-        const today = new Date(Date.now());
-        const date = day.date;
-        return (date.getFullYear() === today.getFullYear() &&
-            date.getMonth() === today.getMonth() &&
-            date.getDate() === today.getDate());
+        return isDateInRanges(day, [
+            {
+                type: DateRangeType.Between,
+                dateRange: [first(this._values).native, last(this._values).native],
+            },
+        ]);
     }
-    isWeekend(date) {
-        const day = date.date.getDay();
-        return day === 0 || day === 6;
+    setRangePreviewDate(day) {
+        this._rangePreviewDate = day;
+        this.emitEvent('igcRangePreviewDateChange', {
+            detail: day ? day.native : undefined,
+        });
     }
-    isSpecial(day) {
-        if (this.specialDates === null) {
-            return false;
+    changeRangePreview(day) {
+        if (this._values.length === 1 && !first(this._values).equalTo(day)) {
+            this.setRangePreviewDate(day);
         }
-        return isDateInRanges(day.date, this.specialDates);
-    }
-    dateClicked(event, day) {
-        event.stopPropagation();
-        this.selectDay(day);
-        this.changeActiveDate(day);
     }
-    selectDay(day) {
-        if (this.rangePreviewDate) {
-            this.setRangePreviewDate(undefined);
-        }
-        const result = this.selectDate(day.date);
-        if (result) {
-            this.emitEvent('igcChange', { detail: day.date });
+    clearRangePreview() {
+        if (this._rangePreviewDate) {
+            this.setRangePreviewDate();
         }
     }
-    selectDate(value) {
-        if (this.isDisabled(value)) {
+    isFirstInRange(day) {
+        if (this._isSingle || !this._hasValues) {
             return false;
         }
-        switch (this.selection) {
-            case 'single':
-                if (this.value?.getTime() === value.getTime()) {
-                    return false;
-                }
-                this.selectSingle(value);
-                break;
-            case 'multiple':
-                this.selectMultiple(value);
-                break;
-            case 'range':
-                this.selectRange(value);
-                break;
-        }
-        return true;
-    }
-    generateDateRange(start, end) {
-        const result = [];
-        let startDate = getDateOnly(start);
-        const endDate = getDateOnly(end);
-        while (startDate.getTime() < endDate.getTime()) {
-            startDate = this.calendarModel.timedelta(startDate, TimeDeltaInterval.Day, 1);
-            result.push(startDate);
-        }
-        return result;
-    }
-    selectRange(value) {
-        let start;
-        let end;
-        let selectedDates = (this.values ?? []);
-        if (selectedDates.length !== 1) {
-            selectedDates = [value];
-        }
-        else {
-            if (selectedDates[0].getTime() === value.getTime()) {
-                this.values = [];
-                return;
-            }
-            selectedDates.push(value);
-            selectedDates.sort((a, b) => a.valueOf() - b.valueOf());
-            start = selectedDates.shift();
-            end = selectedDates.pop();
-            selectedDates = [start, ...this.generateDateRange(start, end)];
-        }
-        selectedDates = selectedDates.filter((d) => !this.isDisabled(d));
-        this.values = [...selectedDates];
-    }
-    selectSingle(value) {
-        this.value = getDateOnly(value);
+        const target = this._rangePreviewDate?.lessThan(first(this._values))
+            ? this._rangePreviewDate
+            : first(this._values);
+        return target.equalTo(day);
     }
-    selectMultiple(value) {
-        let selectedDates = (this.values ?? []);
-        const valueDateOnly = getDateOnly(value);
-        const newSelection = [];
-        if (selectedDates.every((date) => date.getTime() !== valueDateOnly.getTime())) {
-            newSelection.push(valueDateOnly);
-        }
-        else {
-            selectedDates = selectedDates.filter((date) => date.getTime() !== valueDateOnly.getTime());
+    isLastInRange(day) {
+        if (this._isSingle || !this._hasValues) {
+            return false;
         }
-        if (newSelection.length > 0) {
-            selectedDates = selectedDates.concat(newSelection);
+        const target = this._rangePreviewDate?.greaterThan(last(this._values))
+            ? this._rangePreviewDate
+            : last(this._values);
+        return target.equalTo(day);
+    }
+    isRangeDate(day) {
+        const isSingleRange = this._values.length === 1;
+        if (!this._hasValues || (isSingleRange && !this._rangePreviewDate)) {
+            return false;
         }
-        selectedDates = selectedDates.filter((d) => !this.isDisabled(d));
-        selectedDates.sort((a, b) => a.valueOf() - b.valueOf());
-        this.values = [...selectedDates];
-    }
-    changeActiveDate(day) {
-        this.activeDate = day.date;
-        this.emitEvent('igcActiveDateChange', { detail: day });
+        const min = first(this._values);
+        const max = isSingleRange ? this._rangePreviewDate : last(this._values);
+        return isDateInRanges(day, [
+            {
+                type: DateRangeType.Between,
+                dateRange: [min.native, max.native],
+            },
+        ]);
     }
-    dateKeyDown(event, day) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.selectDay(day);
+    isRangePreview(day) {
+        if (!(this._hasValues && this._rangePreviewDate)) {
+            return false;
         }
+        return isDateInRanges(day, [
+            {
+                type: DateRangeType.Between,
+                dateRange: [first(this._values).native, this._rangePreviewDate.native],
+            },
+        ]);
     }
-    changeRangePreview(date) {
-        if (this.selection === 'range' &&
-            this.values &&
-            this.values.length === 1 &&
-            !isEqual(this.values[0], date)) {
-            this.setRangePreviewDate(date);
+    intlFormatDay(day) {
+        const fmt = this._intl.get('label');
+        if (this._rangePreviewDate?.equalTo(day)) {
+            return fmt.formatRange(first(this._values).native, this._rangePreviewDate.native);
         }
-    }
-    clearRangePreview() {
-        if (this.rangePreviewDate) {
-            this.setRangePreviewDate(undefined);
+        if (this.isFirstInRange(day) || this.isLastInRange(day)) {
+            return fmt.formatRange(first(this._values).native, last(this._values).native);
         }
-    }
-    setRangePreviewDate(value) {
-        this.rangePreviewDate = value;
-        this.emitEvent('igcRangePreviewDateChange', { detail: value });
-    }
-    resolveDayItemPartName(day) {
-        const isInactive = day.isNextMonth || day.isPrevMonth;
-        const isHidden = (this.hideLeadingDays && day.isPrevMonth) ||
-            (this.hideTrailingDays && day.isNextMonth);
-        const isDisabled = this.isDisabled(day.date);
+        return fmt.format(day.native);
+    }
+    getDayHandlers(day) {
+        const range = this._isRange;
+        const changePreview = range
+            ? this.changeRangePreview.bind(this, day)
+            : nothing;
+        const clearPreview = range ? this.clearRangePreview : nothing;
+        return { changePreview, clearPreview };
+    }
+    getDayProperties(day, today) {
+        const isRange = this._isRange;
+        const disabled = isDateInRanges(day, this._disabledDates);
+        const hiddenLeading = this.hideLeadingDays && isPreviousMonth(day, this._activeDate);
+        const hiddenTrailing = this.hideTrailingDays && isNextMonth(day, this._activeDate);
+        const hidden = hiddenLeading || hiddenTrailing;
+        const inactive = !areSameMonth(day, this._activeDate);
         return {
             date: true,
+            disabled: disabled || hidden,
             first: this.isFirstInRange(day),
             last: this.isLastInRange(day),
-            selected: !isDisabled && this.isSelected(day),
-            inactive: isInactive,
-            hidden: isHidden,
-            current: this.isToday(day),
-            weekend: this.isWeekend(day),
-            range: this.selection === 'range' && this.isRangeDate(day.date),
-            special: this.isSpecial(day),
-            disabled: isHidden || isDisabled,
-            single: this.selection !== 'range',
-            preview: this.isRangePreview(day.date),
+            range: isRange && this.isRangeDate(day),
+            preview: isRange && this.isRangePreview(day),
+            current: !inactive && day.equalTo(today),
+            inactive,
+            hidden,
+            weekend: day.weekend,
+            single: !isRange,
+            selected: !disabled && this.isSelected(day),
+            special: isDateInRanges(day, this._specialDates) && !inactive,
         };
     }
-    renderWeekHeaders() {
-        return html `<div role="row" part="days-row first">
-      ${this.showWeekNumbers
-            ? html `<span role="columnheader" part="label week-number first">
-            <span part="week-number-inner first"
-              >${this.resourceStrings.weekLabel}</span
-            >
-          </span>`
-            : ''}
-      ${this.generateWeekHeader().map((weekday) => html `<span
-            role="columnheader"
-            part="label"
-            aria-label=${weekday.ariaLabel}
-          >
-            <span part="label-inner">${this.titleCase(weekday.label)}</span>
-          </span> `)}
-    </div>`;
-    }
-    renderDates() {
-        return this.dates.map((week, i) => {
-            const last = i === this.dates.length - 1;
-            return html `<div role="row" part="days-row">
-        ${this.showWeekNumbers
-                ? html `<span
-              role="rowheader"
-              part=${partNameMap({ 'week-number': true, last })}
-            >
-              <span part=${partNameMap({ 'week-number-inner': true, last })}
-                >${this.getWeekNumber(week[0].date)}</span
-              >
-            </span>`
-                : ''}
-        ${week.map((day) => this.renderDateItem(day))}
-      </div>`;
-        });
-    }
-    dayLabelFormatter(value) {
-        if (this.rangePreviewDate &&
-            areEqualDates(this.rangePreviewDate, value.date)) {
-            return this.labelFormatter.formatRange(this.values.at(0), this.rangePreviewDate);
-        }
-        if (this.isFirstInRange(value) || this.isLastInRange(value)) {
-            return this.labelFormatter.formatRange(this.values.at(0), this.values.at(-1));
+    renderDay(day, today) {
+        const ariaLabel = this.intlFormatDay(day);
+        const { changePreview, clearPreview } = this.getDayHandlers(day);
+        const props = this.getDayProperties(day, today);
+        const parts = partNameMap(props);
+        return html `
+      <span part=${parts}>
+        <span
+          role="gridcell"
+          part=${parts.replace('date', 'date-inner')}
+          aria-label=${ariaLabel}
+          aria-disabled=${props.disabled}
+          aria-selected=${props.selected}
+          data-value=${day.timestamp}
+          tabindex=${day.equalTo(this._activeDate) ? 0 : -1}
+          @focus=${changePreview}
+          @blur=${clearPreview}
+          @mouseenter=${changePreview}
+          @mouseleave=${clearPreview}
+        >
+          ${day.date}
+        </span>
+      </span>
+    `;
+    }
+    renderHeaderWeekNumber() {
+        return html `
+      <span role="columnheader" part="label week-number first">
+        <span part="week-number-inner first">
+          ${this.resourceStrings.weekLabel}
+        </span>
+      </span>
+    `;
+    }
+    renderWeekNumber(start, last) {
+        return html `
+      <span role="rowheader" part=${partNameMap({ 'week-number': true, last })}>
+        <span part=${partNameMap({ 'week-number-inner': true, last })}>
+          ${start.week}
+        </span>
+      </span>
+    `;
+    }
+    renderHeaders() {
+        const label = this._intl.get('weekday');
+        const aria = this._intl.get('ariaWeekday');
+        const days = take(generateMonth(this._activeDate, this._firstDayOfWeek), daysInWeek);
+        const weekNumber = this.showWeekNumbers
+            ? this.renderHeaderWeekNumber()
+            : nothing;
+        const headers = days.map((day) => html `
+        <span
+          role="columnheader"
+          part="label"
+          aria-label=${aria.format(day.native)}
+        >
+          <span part="label-inner">${label.format(day.native)}</span>
+        </span>
+      `);
+        return html `
+      <div role="row" part="days-row first">${weekNumber}${headers}</div>
+    `;
+    }
+    *renderWeeks() {
+        const today = CalendarDay.today;
+        const weeks = Array.from(chunk(this.dates, daysInWeek));
+        const last = weeks.length - 1;
+        for (const [idx, week] of weeks.entries()) {
+            yield html `
+        <div role="row" part="days-row">
+          ${this.showWeekNumbers
+                ? this.renderWeekNumber(week[0], idx === last)
+                : nothing}
+          ${week.map((day) => this.renderDay(day, today))}
+        </div>
+      `;
         }
-        return this.labelFormatter.format(value.date);
-    }
-    renderDateItem(day) {
-        const datePartName = partNameMap(this.resolveDayItemPartName(day));
-        const dateInnerPartName = datePartName.replace('date', 'date-inner');
-        return html `<span part=${datePartName}>
-      <span
-        part=${dateInnerPartName}
-        role="gridcell"
-        aria-label=${this.dayLabelFormatter(day)}
-        aria-selected=${this.isSelected(day)}
-        aria-disabled=${this.isDisabled(day.date)}
-        tabindex=${this.active && areEqualDates(this.activeDate, day.date)
-            ? 0
-            : -1}
-        @click=${(event) => this.dateClicked(event, day)}
-        @focus=${() => this.changeRangePreview(day.date)}
-        @blur=${() => this.clearRangePreview()}
-        @keydown=${(event) => this.dateKeyDown(event, day)}
-        @mouseenter=${() => this.changeRangePreview(day.date)}
-        @mouseleave=${() => this.clearRangePreview()}
-        >${this.formattedDate(day.date)}</span
-      >
-    </span>`;
     }
     render() {
-        return html `${this.renderWeekHeaders()} ${this.renderDates()}`;
+        return html `${this.renderHeaders()}${this.renderWeeks()}`;
     }
 };
 IgcDaysViewComponent.tagName = 'igc-days-view';
 IgcDaysViewComponent.styles = styles;
+__decorate([
+    state()
+], IgcDaysViewComponent.prototype, "dates", void 0);
 __decorate([
     query('[tabindex="0"]')
 ], IgcDaysViewComponent.prototype, "activeDay", void 0);
+__decorate([
+    property({ type: Boolean })
+], IgcDaysViewComponent.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'hide-leading-days' })
 ], IgcDaysViewComponent.prototype, "hideLeadingDays", void 0);
@@ -421,21 +351,20 @@ __decorate([
     property({ type: Boolean, attribute: 'hide-trailing-days' })
 ], IgcDaysViewComponent.prototype, "hideTrailingDays", void 0);
 __decorate([
-    property({ type: Boolean })
-], IgcDaysViewComponent.prototype, "active", void 0);
+    property({ attribute: false })
+], IgcDaysViewComponent.prototype, "rangePreviewDate", null);
 __decorate([
     property({ attribute: false })
-], IgcDaysViewComponent.prototype, "rangePreviewDate", void 0);
+], IgcDaysViewComponent.prototype, "resourceStrings", void 0);
 __decorate([
     property({ attribute: 'week-day-format' })
 ], IgcDaysViewComponent.prototype, "weekDayFormat", void 0);
 __decorate([
-    property({ attribute: false })
-], IgcDaysViewComponent.prototype, "resourceStrings", void 0);
-__decorate([
-    watch('weekDayFormat'),
     watch('locale')
-], IgcDaysViewComponent.prototype, "formattersChange", null);
+], IgcDaysViewComponent.prototype, "localeChange", null);
+__decorate([
+    watch('weekDayFormat')
+], IgcDaysViewComponent.prototype, "weekDayFormatChange", null);
 __decorate([
     watch('weekStart'),
     watch('activeDate')