@refinitiv-ui/elements 5.11.0 → 5.12.0-alpha.0

package/lib/calendar/index.js

@@ -1,1274 +0,0 @@
-import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { cache } from '@refinitiv-ui/core/lib/directives/cache.js';
-import { guard } from '@refinitiv-ui/core/lib/directives/guard.js';
-import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
-import { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
-import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/lib/date.js';
-import { left, right, up, down, first, last } from '@refinitiv-ui/utils/lib/navigation.js';
-import { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams } from './utils.js';
-import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import { RenderView, CalendarLocaleScope, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
-import './locales.js';
-import '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
-/**
- * Standard calendar element
- *
- * @fires value-changed - Fired when the `value` changes.
- * @fires view-changed - Fired when the `view` changes.
- *
- * @attr {boolean} readonly - Set readonly state
- * @prop {boolean} [readonly=false] - Set readonly state
- *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
- *
- * @slot footer - Adds slotted content into the footer of the calendar control
- */
-let Calendar = class Calendar extends ControlElement {
-    constructor() {
-        super(...arguments);
-        this.defaultRole = 'group';
-        /**
-         * Reference to the view button
-         */
-        this.viewBtnRef = createRef();
-        this._min = '';
-        this._max = '';
-        /**
-        * Only enable weekdays
-        */
-        this.weekdaysOnly = false;
-        /**
-        * Only enable weekends
-        */
-        this.weekendsOnly = false;
-        /**
-        * Custom filter, used for enabling/disabling certain dates
-        * @type {CalendarFilter | null}
-        */
-        this.filter = null;
-        this._view = '';
-        this.localFirstDayOfWeek = FIRST_DAY_OF_WEEK; // used from locales. 0 stands for Sunday
-        this._firstDayOfWeek = null; // used from setter
-        /**
-        * Set to switch to range select mode
-        */
-        this.range = false;
-        /**
-        * Set to switch to multiple select mode
-        */
-        this.multiple = false;
-        this._values = [];
-        /**
-         * Fill head and tail cell dates
-         */
-        this.fillCells = false;
-        /**
-         * Used for internal navigation between render views
-         */
-        this._renderView = RenderView.DAY;
-        /**
-         * Used for keyboard navigation when trying
-         * to restore focus on re-render and control navigation
-         */
-        this._activeCellIndex = null;
-        // Used to store current navigation map
-        this.navigationGrid = [];
-        /**
-         * Connected to role. If false, the values are not announced in the screen reader
-         */
-        this.announceValues = true;
-        // Cashed filter, which is constructed based on multiple local filters
-        this.isDateAvailable = null;
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: inline-block;
-      }
-      [part~=navigation], [part~=navigation] section {
-        display: flex;
-        flex-flow: row nowrap;
-      }
-      [part~=navigation] {
-        justify-content: space-between;
-      }
-      [part~=navigation] > div {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-      }
-      [part~=cell-content] {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      [part=navigation] [part] {
-        flex: none;
-      }
-      [part=table] {
-        width: 100%;
-      }
-      [part~=row] {
-        display: flex;
-        width: 100%;
-      }
-      [part~=cell] {
-        position: relative;
-      }
-      [part~=cell][part~=year] {
-        width: calc(100% / ${YEAR_VIEW.columnCount});
-        padding-top: calc(100% / ${YEAR_VIEW.columnCount});
-      }
-      [part~=cell][part~=month] {
-        width: calc(100% / ${MONTH_VIEW.columnCount});
-        padding-top: calc(100% / ${MONTH_VIEW.columnCount});
-      }
-      [part~=cell][part~=day], [part~=cell][part~=day-name] {
-        width: calc(100% / ${DAY_VIEW.columnCount});
-        padding-top: calc(100% / ${DAY_VIEW.columnCount});
-      }
-      [part~=cell-content]:not([tabindex]) {
-        pointer-events: none;
-      }
-      [part~=selection] {
-        cursor: pointer;
-      }
-    `;
-    }
-    /**
-    * Set minimum date
-    * @param min min date
-    * @default -
-    */
-    set min(min) {
-        const oldMin = this._min;
-        if (!this.isValidValue(min)) {
-            this.warnInvalidValue(min);
-            min = '';
-        }
-        if (oldMin !== min) {
-            this._min = min;
-            this.requestUpdate('min', oldMin);
-        }
-    }
-    get min() {
-        return this._min;
-    }
-    /**
-    * Set maximum date
-    * @param max max date
-    * @default -
-    */
-    set max(max) {
-        const oldMax = this._max;
-        if (!this.isValidValue(max)) {
-            this.warnInvalidValue(max);
-            max = '';
-        }
-        if (oldMax !== max) {
-            this._max = max;
-            this.requestUpdate('max', oldMax);
-        }
-    }
-    get max() {
-        return this._max;
-    }
-    /**
-    * Current calendar view date
-    * @param view view date
-    * @default -
-    */
-    set view(view) {
-        if (view && !isValidDate(view, DateFormat.yyyyMM)) {
-            this.warnInvalidView(view);
-            view = '';
-        }
-        const oldView = this._view;
-        if (oldView !== view) {
-            this._view = view;
-            this.resetActiveCellIndex();
-            this.requestUpdate('view', oldView);
-        }
-    }
-    get view() {
-        /* as soon as user interaction has happened, always rely on view */
-        return this._view || (this.value ? utcFormat(toDateSegment(this.value), DateFormat.yyyyMM) : format(new Date(), DateFormat.yyyyMM));
-    }
-    /**
-     * Set the first day of the week.
-     * 0 - for Sunday, 6 - for Saturday
-     * @param firstDayOfWeek The first day of the week
-     * @type {number | null}
-     * @default null
-     */
-    set firstDayOfWeek(firstDayOfWeek) {
-        firstDayOfWeek %= 7;
-        const oldFirstDayOfWeek = this._firstDayOfWeek;
-        if (oldFirstDayOfWeek !== firstDayOfWeek) {
-            this._firstDayOfWeek = firstDayOfWeek;
-            this.requestUpdate('firstDayOfWeek', oldFirstDayOfWeek);
-        }
-    }
-    get firstDayOfWeek() {
-        return this._firstDayOfWeek === null ? this.localFirstDayOfWeek : this._firstDayOfWeek;
-    }
-    /**
-    * Current date time value
-    * @param value Calendar value
-    * @default -
-    */
-    set value(value) {
-        this.values = [value];
-    }
-    get value() {
-        return this.values[0] || '';
-    }
-    /**
-     * Set multiple selected values
-     * @param values Values to set
-     * @type {string[]}
-     * @default []
-     */
-    set values(values) {
-        const oldValues = this._values;
-        const newValues = this.filterAndWarnInvalidValues(values);
-        if (oldValues.toString() !== newValues.toString()) {
-            this._values = newValues;
-            this.requestUpdate('values', oldValues);
-        }
-    }
-    get values() {
-        return this._values.concat();
-    }
-    get renderView() {
-        return this._renderView;
-    }
-    set renderView(renderView) {
-        const oldRenderView = this._renderView;
-        if (oldRenderView !== renderView) {
-            this._renderView = renderView;
-            // always reset active cell to not focus on potentially invalid cell
-            this.resetActiveCellIndex();
-            this.requestUpdate('renderView', oldRenderView);
-        }
-    }
-    get activeCellIndex() {
-        return this._activeCellIndex;
-    }
-    set activeCellIndex(activeCellIndex) {
-        const oldCellIndex = this._activeCellIndex;
-        if (String(activeCellIndex) !== String(oldCellIndex)) {
-            this._activeCellIndex = activeCellIndex;
-            this.requestUpdate('activeCellIndex', oldCellIndex);
-        }
-    }
-    /**
-     * Silently reset cell index without calling request update
-     * @returns {void}
-     */
-    resetActiveCellIndex() {
-        this._activeCellIndex = null;
-    }
-    /**
-     * Get an active element
-     */
-    get activeElement() {
-        return this.shadowRoot.activeElement;
-    }
-    /**
-     * Get selectable date button element by index
-     * @param index Cell index
-     * @returns button HTML date button element or null
-     */
-    getDateButtonByIndex(index) {
-        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selection]'));
-        return elements.find((element) => this.isDateButton(element) && String(element.index) === String(index));
-    }
-    /**
-     * Get active date button element
-     * @returns button HTML date button element or null
-     */
-    get activeDateButton() {
-        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selection]');
-    }
-    /**
-     * Return true if passed target is HTML
-     * date button element that can be selected
-     * @param target Target to check
-     * @returns isDateButtonElement
-     */
-    isDateButton(target) {
-        return target.index !== undefined;
-    }
-    static get observedAttributes() {
-        const observed = super.observedAttributes;
-        return ['role'].concat(observed);
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        super.attributeChangedCallback(name, oldValue, newValue);
-        if (name === 'role') {
-            this.announceValues = !(!newValue || newValue === 'none' || newValue === 'presentation');
-        }
-    }
-    /**
-     * Perform asynchronous update
-     * @returns promise
-     */
-    async performUpdate() {
-        const localFirstDayOfWeek = Number(await this.dateTPromise('FIRST_DAY_OF_WEEK'));
-        this.localFirstDayOfWeek = isNaN(localFirstDayOfWeek) ? FIRST_DAY_OF_WEEK : (localFirstDayOfWeek % 7);
-        void super.performUpdate();
-    }
-    /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
-    update(changedProperties) {
-        if (!this.localMonthsNames || changedProperties.has(TranslatePropertyKey)) {
-            const locale = getLocale(this);
-            this.localMonthsNames = monthsNames(locale);
-        }
-        if (!this.localWeekdaysNames || changedProperties.has(TranslatePropertyKey)) {
-            const locale = getLocale(this);
-            const longWeekdaysNames = weekdaysNames(locale, 'long');
-            this.localWeekdaysNames = weekdaysNames(locale).map((narrow, index) => {
-                return { narrow, long: longWeekdaysNames[index] };
-            });
-        }
-        this.shouldConstructFilters(changedProperties) && this.constructFilters();
-        super.update(changedProperties);
-    }
-    /**
-     * Called after render life-cycle finished
-     * @param changedProperties Properties which have changed
-     * @return {void}
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        // This code is here to ensure that focus is not lost
-        // while navigating through the render views using keyboard
-        if (this.focused && changedProperties.has('renderView') && this.viewBtnRef.value && this.activeElement !== this.viewBtnRef.value) {
-            this.viewBtnRef.value.focus();
-        }
-        const cellIndex = this.activeCellIndex;
-        if (cellIndex && changedProperties.has('activeCellIndex')) {
-            const dateButtonEl = this.getDateButtonByIndex(cellIndex);
-            if (dateButtonEl && this.activeElement !== dateButtonEl) {
-                dateButtonEl.focus();
-            }
-        }
-    }
-    /**
-     * Run when an element has been first updated
-     * @param changedProperties properties that was changed on first update
-     * @returns {void}
-     */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.renderRoot.addEventListener('keydown', event => this.onKeyDown(event));
-    }
-    /**
-     * Show invalid view message
-     * @param value Invalid value
-     * @returns {void}
-     */
-    warnInvalidView(value) {
-        new WarningNotice(`The specified value "${value}" does not conform to the required format. The format is "yyyy-MM".`).once();
-    }
-    /**
-     * Show invalid value message
-     * @param value Invalid value
-     * @returns {void}
-     */
-    warnInvalidValue(value) {
-        new WarningNotice(`The specified value "${value}" does not conform to the required format. The format is "yyyy-MM-dd".`).once();
-    }
-    /**
-    * Validate that the value confirms the control type
-    * @param value Value to check
-    * @returns false if value is invalid
-    */
-    isValidValue(value) {
-        return value === '' || isValidDate(value);
-    }
-    /**
-     * A helper method to make sure that only valid values are passed
-     * Warn if passed value is invalid
-     * @param values Values to check
-     * @returns Filtered collection of values
-     */
-    filterAndWarnInvalidValues(values) {
-        const filtered = [];
-        values.forEach(value => {
-            if (this.isValidValue(value)) {
-                value && filtered.push(value);
-            }
-            else {
-                this.warnInvalidValue(value);
-            }
-        });
-        return filtered;
-    }
-    /**
-     * Check if there is a need to reconstruct filters
-     * @param changedProperties properties that was changed on first update
-     * @returns true if filter needs to be constructed
-     */
-    shouldConstructFilters(changedProperties) {
-        return changedProperties.has('min')
-            || changedProperties.has('max')
-            || changedProperties.has('weekdaysOnly')
-            || changedProperties.has('weekendsOnly')
-            || changedProperties.has('filter');
-    }
-    /**
-     * Construct and store a collection of filters
-     * First always comes default filters and last custom filters
-     * @returns {void}
-     */
-    constructFilters() {
-        const filters = [];
-        this.min && filters.push(date => isSameDay(date, this.min) || isAfter(date, this.min));
-        this.max && filters.push(date => isSameDay(date, this.max) || isBefore(date, this.max));
-        if (this.weekdaysOnly) {
-            filters.push(date => !isWeekend(date));
-        }
-        if (this.weekendsOnly) {
-            filters.push(date => isWeekend(date));
-        }
-        if (this.filter) {
-            filters.push(this.filter);
-        }
-        const filtersLength = filters.length;
-        if (filtersLength) {
-            this.isDateAvailable = (value) => {
-                for (let i = 0; i < filtersLength; i += 1) {
-                    if (!filters[i](value)) {
-                        return false;
-                    }
-                }
-                return true;
-            };
-        }
-        else {
-            this.isDateAvailable = null;
-        }
-    }
-    /**
-     * Check if date cell is selected
-     * @param value A value to compare
-     * @param comparator A comparator to check for selection. Can be day, month or year
-     * @returns true if cell is selected
-     */
-    isDateCellSelected(value, comparator) {
-        const values = this._values;
-        const valuesLength = values.length;
-        for (let i = 0; i < valuesLength; i += 1) {
-            if (comparator(value, values[i])) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Get cell selection model, which is used to bind values and ranges
-     * to cell styles
-     * @param value A value to compare
-     * @param comparator A comparator to check for selection. Can be day, month or year
-     * @returns cell selection model
-     */
-    getCellSelection(value, comparator) {
-        const values = this._values;
-        const selected = this.isDateCellSelected(value, comparator);
-        const from = values[0];
-        const to = values[1];
-        if (!this.range || !from || !to) {
-            return {
-                selected
-            };
-        }
-        const rangeFrom = comparator(value, from);
-        const rangeTo = comparator(value, to);
-        const range = !rangeFrom && !rangeTo && isAfter(value, from) && isBefore(value, to);
-        return {
-            selected,
-            range,
-            rangeFrom,
-            rangeTo
-        };
-    }
-    /**
-     * Set navigation map based on rows
-     * @param rows A collection of rows with cells
-     * @returns {void}
-     */
-    setNavigationMap(rows) {
-        this.navigationGrid = rows.map(row => row.map(cell => cell.value && !cell.disabled ? 1 : 0));
-    }
-    /**
-     * Run when next button is tapped.
-     * Change current view to next view
-     * @param event Next view tap event
-     * @returns {void}
-     */
-    onNextTap(event) {
-        if (!event.defaultPrevented) {
-            this.toNextView();
-        }
-    }
-    /**
-     * Run when previous button is tapped.
-     * Change current view to previous view
-     * @param event Previous view tap event
-     * @returns {void}
-     */
-    onPreviousTap(event) {
-        if (!event.defaultPrevented) {
-            this.toPreviousView();
-        }
-    }
-    /**
-     * Run when change view button is tapped.
-     * Switch between views
-     * @param event Render view tap event
-     * @returns {void}
-     */
-    onRenderViewTap(event) {
-        if (!event.defaultPrevented) {
-            this.renderView = this.renderView === RenderView.DAY ? RenderView.YEAR : RenderView.DAY;
-        }
-    }
-    /**
-     * Run when key down event happens on calendar
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    onKeyDown(event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        switch (event.key) {
-            case 'Esc':
-            case 'Escape':
-                if (this.renderView === RenderView.YEAR || this.renderView === RenderView.MONTH) {
-                    this.renderView = RenderView.DAY;
-                    break;
-                }
-                return;
-            case 'Up': // IE11
-            case 'ArrowUp':
-                void this.onNavigation('ArrowUp');
-                break;
-            case 'Down':
-            case 'ArrowDown':
-                void this.onNavigation('ArrowDown');
-                break;
-            case 'Left':
-            case 'ArrowLeft':
-                void this.onNavigation('ArrowLeft');
-                break;
-            case 'Right':
-            case 'ArrowRight':
-                void this.onNavigation('ArrowRight');
-                break;
-            case 'Home':
-            case 'End':
-                void this.onNavigation(event.key);
-                break;
-            default:
-                return;
-        }
-        event.preventDefault();
-    }
-    /**
-     * Run when tap event happens ot table.
-     * Select the values or switch the view
-     * @param event Tap event
-     * @returns {void}
-     */
-    onTableTap(event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        const cell = event.target;
-        if (!cell || !this.isDateButton(cell) || !cell.value) {
-            return;
-        }
-        this.activeCellIndex = cell.index;
-        const cellSegment = toDateSegment(cell.value);
-        const viewSegment = toDateSegment(this.view);
-        if (this.renderView === RenderView.YEAR) { /* YEAR -> MONTH */
-            viewSegment.year = cellSegment.year;
-            if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.MONTH;
-            }
-            return;
-        }
-        if (this.renderView === RenderView.MONTH) { /* MONTH -> DAY */
-            viewSegment.year = cellSegment.year;
-            viewSegment.month = cellSegment.month;
-            if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.DAY;
-            }
-            return;
-        }
-        this.onTapSelectValue(cell.value);
-    }
-    /**
-     * Navigate over the grid
-     * @param key Navigation direction
-     * @returns navigation promise
-     */
-    async onNavigation(key) {
-        const grid = this.navigationGrid;
-        switch (key) {
-            case 'Home':
-                this.activeCellIndex = first(grid);
-                return;
-            case 'End':
-                this.activeCellIndex = last(grid);
-                return;
-            // no default
-        }
-        // no previously selected cell, but there is cell which is a candidate for navigation
-        const activeDateEl = this.activeDateButton;
-        if (!this.activeCellIndex && activeDateEl) {
-            this.activeCellIndex = activeDateEl.index;
-            // current cell is already in focus (e.g. via Tab key, continue navigation from that point)
-            if (!(this.activeElement === activeDateEl)) {
-                return;
-            }
-        }
-        const activeCellIndex = this.activeCellIndex;
-        // All cells are disabled
-        if (!activeCellIndex) {
-            return;
-        }
-        // active cell is selected
-        if (activeCellIndex) {
-            let newActiveCell;
-            switch (key) {
-                case 'ArrowUp':
-                    newActiveCell = up(grid, activeCellIndex);
-                    break;
-                case 'ArrowDown':
-                    newActiveCell = down(grid, activeCellIndex);
-                    break;
-                case 'ArrowLeft':
-                    newActiveCell = left(grid, activeCellIndex);
-                    break;
-                case 'ArrowRight':
-                    newActiveCell = right(grid, activeCellIndex);
-                    break;
-                // no default
-            }
-            // Standard navigation withing the same view
-            if (newActiveCell) {
-                this.activeCellIndex = newActiveCell;
-                return;
-            }
-        }
-        // Jump to the next view
-        switch (key) {
-            // case 'ArrowUp': // it feels better not having Up/Down in these case
-            case 'ArrowLeft':
-                this.toPreviousView();
-                await this.updateComplete; // must wait until the render cycle has finished
-                await this.onNavigation('End');
-                break;
-            // case 'ArrowDown':
-            case 'ArrowRight':
-                this.toNextView();
-                await this.updateComplete;
-                await this.onNavigation('Home');
-                break;
-            // no default
-        }
-    }
-    /**
-     * Navigate to the next view
-     * @returns {void}
-     */
-    toNextView() {
-        let viewSegment = toDateSegment(this.view);
-        switch (this.renderView) {
-            case RenderView.DAY:
-                viewSegment = toDateSegment(addMonths(this.view, 1));
-                break;
-            case RenderView.MONTH:
-                viewSegment.year += 1;
-                break;
-            case RenderView.YEAR:
-                viewSegment.year += YEARS_PER_YEAR_VIEW;
-                break;
-            // no default
-        }
-        this.notifyViewChange(viewSegment);
-    }
-    /**
-     * Navigate to the previous view
-     * @returns {void}
-     */
-    toPreviousView() {
-        let viewSegment = toDateSegment(this.view);
-        switch (this.renderView) {
-            case RenderView.DAY:
-                viewSegment = toDateSegment(subMonths(this.view, 1));
-                break;
-            case RenderView.MONTH:
-                viewSegment.year -= 1;
-                break;
-            case RenderView.YEAR:
-                viewSegment.year -= YEARS_PER_YEAR_VIEW;
-                break;
-            // no default
-        }
-        this.notifyViewChange(viewSegment);
-    }
-    /**
-     * Run when tap event happened on DAY view and the cell has the values
-     * Try to select/deselect cell value
-     * @param value Date string
-     * @returns {void}
-     */
-    onTapSelectValue(value) {
-        if (this.readonly || this.disabled) {
-            return;
-        }
-        let values;
-        if (this.multiple) {
-            values = this.values.concat([]);
-            const valueIdx = this.values.indexOf(value);
-            if (valueIdx === -1) {
-                values.push(value);
-            }
-            else {
-                values.splice(valueIdx, 1);
-            }
-        }
-        else if (this.range) {
-            if (!this.values.length) {
-                values = [value];
-            }
-            else if (this.values.length === 1) { /* from is populated */
-                const from = this.values[0];
-                const to = value;
-                if (isAfter(to, from) || isSameDay(to, from)) {
-                    values = [this.values[0], value];
-                }
-                else {
-                    values = [value];
-                }
-            }
-            else if (this.values.indexOf(value) === -1) {
-                values = [value];
-            }
-            else {
-                // remove range if start/end index match
-                values = [];
-            }
-        }
-        else {
-            values = this.value === value ? [] : [value];
-        }
-        this.notifyValuesChange(values);
-    }
-    /**
-     * Notify that values array has been changed
-     * @param values A collection of string dates
-     * @returns {void}
-     */
-    notifyValuesChange(values) {
-        if (this.values.toString() !== values.toString()) {
-            this.values = values;
-            this.notifyPropertyChange('value', this.value);
-        }
-    }
-    /**
-     * Notify that view has been changed
-     * @param view Date
-     * @returns {void}
-     */
-    notifyViewChange(view) {
-        const viewString = utcFormat(view, DateFormat.yyyyMM);
-        const res = this.notifyPropertyChange('view', viewString, true);
-        if (res) {
-            this.view = viewString;
-        }
-        return res;
-    }
-    /**
-     * Localised format for render view
-     * @param segment Segment object
-     * @param includeMonth True to include a month
-     * @returns template result
-     */
-    viewFormattedDate(segment, includeMonth = false) {
-        const year = segment.year;
-        const isBC = year <= 0;
-        const includeEra = isBC;
-        const date = utcParse(segment);
-        // Unfortunately IE11 does not support date formatting for year <= 0
-        // Do manual conversion instead
-        if (isIE && isBC) {
-            return html `${formatLocaleDate(date, getLocale(this), includeMonth, includeEra)}`;
-        }
-        return html `${this.dateT('VIEW_FORMAT', { date, includeMonth, includeEra }, ViewFormatTranslateParams)}`;
-    }
-    /**
-     * Get a string representation of current view
-     * @returns template result
-     */
-    get formattedViewRender() {
-        const segment = toDateSegment(this.view);
-        switch (this.renderView) {
-            case RenderView.MONTH:
-                return this.viewFormattedDate(segment);
-            case RenderView.YEAR:
-                const month = segment.month;
-                const day = segment.day;
-                const fromYear = Math.floor(segment.year / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
-                const toYear = fromYear + YEARS_PER_YEAR_VIEW - 1;
-                return html `${this.viewFormattedDate({ year: fromYear, month, day })} - ${this.viewFormattedDate({ year: toYear, month, day })}`;
-            case RenderView.DAY:
-            default:
-                return this.viewFormattedDate(segment, true);
-        }
-    }
-    /**
-     * Set an active state of the cell based
-     * @param rows A collection of rows with cells
-     * @returns {void}
-     */
-    setActiveCell(rows) {
-        const setActive = (cell) => {
-            if (cell) {
-                cell.active = true;
-            }
-        };
-        const columnIdx = this.activeCellIndex ? this.activeCellIndex[0] : NaN;
-        const rowIdx = this.activeCellIndex ? this.activeCellIndex[1] : NaN;
-        // Selected cell is active or today cell or first available cell
-        let activeCell;
-        let nowCell;
-        let firstCell;
-        let selectedCell;
-        for (let i = 0; i < rows.length; i += 1) {
-            const row = rows[i];
-            for (let e = 0; e < row.length; e += 1) {
-                const cell = row[e];
-                if (cell.disabled || !cell.value) {
-                    continue;
-                }
-                if (i === rowIdx && e === columnIdx) {
-                    activeCell = cell;
-                }
-                if (!selectedCell && cell.selected) {
-                    selectedCell = cell;
-                }
-                if (cell.now) {
-                    nowCell = cell;
-                }
-                if (!firstCell) {
-                    firstCell = cell;
-                }
-            }
-        }
-        // If a cell that was active before last render is not available now, remove index
-        if (!activeCell && this.activeCellIndex) {
-            this.resetActiveCellIndex(); // set on private to not cause another re-render
-        }
-        setActive(activeCell || selectedCell || nowCell || firstCell);
-    }
-    /**
-     * Get year view template
-     */
-    get yearView() {
-        const view = RenderView.YEAR;
-        const currentYear = toDateSegment(this.view).year;
-        const startIdx = Math.floor(currentYear / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
-        const years = [];
-        const rows = [];
-        let cells = [];
-        let cell;
-        for (let i = 0; i < YEAR_VIEW.totalCount; i += 1) {
-            if (i % YEAR_VIEW.columnCount === 0) {
-                cells = [];
-                rows.push(cells);
-            }
-            const year = startIdx + i;
-            const value = utcFormat({ year, month: 0, day: 1 }, DateFormat.yyyyMMdd);
-            cell = Object.assign({ view, text: year > 0 ? `${year}` : year === 0 ? '1' : `${Math.abs(year - 1)}`, value: `${year}`, now: isThisYear(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameYear));
-            cells.push(cell);
-            years.push(cell);
-        }
-        years[0].firstDate = true;
-        years[years.length - 1].lastDate = true;
-        this.setActiveCell(rows);
-        this.setNavigationMap(rows);
-        return html `${this.renderRows(rows)}`;
-    }
-    /**
-     * Get month view template
-     */
-    get monthView() {
-        const view = RenderView.MONTH;
-        const currentYear = toDateSegment(this.view).year;
-        const columnCount = MONTH_VIEW.columnCount;
-        const monthCount = 12;
-        const totalCount = MONTH_VIEW.totalCount;
-        const monthsNames = this.localMonthsNames;
-        const before = (totalCount - monthCount) / 2;
-        const startIdx = monthCount - before % monthCount;
-        const after = before + monthCount;
-        const months = [];
-        const rows = [];
-        let cell;
-        let cells = [];
-        for (let i = 0; i < totalCount; i += 1) {
-            if (i % columnCount === 0) {
-                cells = [];
-                rows.push(cells);
-            }
-            const month = (startIdx + i) % monthCount; /* 0 for Jan, 11 for Dev */
-            const year = currentYear + Math.floor((i - before) / monthCount);
-            const segment = { year, month, day: 1 };
-            const value = utcFormat(segment, DateFormat.yyyyMMdd);
-            const idle = i < before || i >= after;
-            cell = Object.assign({ view, text: monthsNames[month], value: utcFormat(segment, DateFormat.yyyyMM), idle, now: isThisMonth(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameMonth));
-            cells.push(cell);
-            months.push(cell);
-        }
-        months[0].firstDate = true;
-        months[months.length - 1].lastDate = true;
-        this.setActiveCell(rows);
-        this.setNavigationMap(rows);
-        return html `${this.renderRows(rows)}`;
-    }
-    /**
-     * Get day view template
-     */
-    get dayView() {
-        const view = RenderView.DAY;
-        const firstDayOfWeek = this.firstDayOfWeek;
-        const padding = (7 + utcParse(this.view).getUTCDay() - firstDayOfWeek) % 7;
-        const viewMonth = monthInfo(this.view);
-        const prevMonth = monthInfo(subMonths(this.view, 1));
-        const nextMonth = monthInfo(addMonths(this.view, 1));
-        const days = [];
-        const rows = [];
-        let cells = [];
-        let day;
-        let month;
-        let year;
-        // Generate new cells.
-        for (let i = 0; i < DAY_VIEW.totalCount; i += 1) {
-            if (i % DAY_VIEW.columnCount === 0) {
-                cells = [];
-                rows.push(cells);
-            }
-            const datePadding = i - padding + 1;
-            if (datePadding <= 0) {
-                if (!this.fillCells) {
-                    cells.push({
-                        view,
-                        index: [cells.length, rows.length - 1]
-                    });
-                    continue;
-                }
-                day = prevMonth.days + datePadding;
-                month = prevMonth.month;
-                year = prevMonth.year;
-            }
-            else if (datePadding > viewMonth.days) {
-                if (!this.fillCells) {
-                    cells.push({
-                        view,
-                        index: [cells.length, rows.length - 1]
-                    });
-                    continue;
-                }
-                day = datePadding - viewMonth.days;
-                month = nextMonth.month;
-                year = nextMonth.year;
-            }
-            else {
-                day = datePadding;
-                month = viewMonth.month;
-                year = viewMonth.year;
-            }
-            const value = utcFormat({ year, month, day }, DateFormat.yyyyMMdd);
-            const disabled = this.isDateAvailable ? !this.isDateAvailable(value) : false;
-            const dayCell = Object.assign({ view, text: day.toString(), value,
-                disabled, idle: month !== viewMonth.month || year !== viewMonth.year, now: isToday(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameDay));
-            cells.push(dayCell);
-            days.push(dayCell);
-        }
-        days[0].firstDate = true;
-        days[days.length - 1].lastDate = true;
-        this.setActiveCell(rows);
-        this.setNavigationMap(rows);
-        return html `
-      ${guard([this.firstDayOfWeek, this.lang], () => this.renderWeekdayNames)}
-      ${this.renderRows(rows)}
-    `;
-    }
-    /**
-     * Get weekday names template
-     */
-    get renderWeekdayNames() {
-        const firstDayOfWeek = this.firstDayOfWeek;
-        const weekdaysNames = this.localWeekdaysNames.slice(firstDayOfWeek).concat(this.localWeekdaysNames.slice(0, firstDayOfWeek));
-        return html `
-      <div role="row"
-           part="row day-name-row">${weekdaysNames.map(day => html `
-        <div scope="col" role="columnheader" part="cell day-name" abbr="${day.long}">
-          <div part="cell-content">${day.narrow}</div>
-        </div>
-      `)}</div>`;
-    }
-    /**
-     * Render a view based on the current render view
-     */
-    get viewRender() {
-        let renderView;
-        switch (this.renderView) {
-            case RenderView.MONTH:
-                renderView = this.monthView;
-                break;
-            case RenderView.YEAR:
-                renderView = this.yearView;
-                break;
-            case RenderView.DAY:
-            default:
-                renderView = this.dayView;
-        }
-        return html `${cache(renderView)}`;
-    }
-    /**
-     * Get cell translate label key based on selected state
-     * @param cell Cell
-     * @returns key Translate label key
-     */
-    getCellLabelKey(cell) {
-        if (cell.selected && cell.now) {
-            return 'SELECTED_NOW';
-        }
-        if (cell.selected) {
-            return 'SELECTED';
-        }
-        if (cell.now) {
-            return 'NOW';
-        }
-        return 'CELL_LABEL';
-    }
-    /**
-     * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
-     * @returns template result
-     */
-    renderCell(cell) {
-        const isSelectable = cell.value !== undefined && !cell.disabled;
-        return html `<div
-      role="gridcell"
-      part="cell ${cell.view}"
-      aria-selected="${ifDefined(isSelectable ? (cell.selected ? 'true' : 'false') : undefined)}"
-      ?active=${cell.active}
-      ?disabled=${cell.disabled}
-      ?idle=${cell.idle}
-      ?today=${cell.now}
-      ?first-date=${cell.firstDate}
-      ?last-date=${cell.lastDate}
-      ?selected=${cell.selected}
-      ?range=${cell.range}
-      ?range-from=${cell.rangeFrom}
-      ?range-to=${cell.rangeTo}>
-        <div role="${ifDefined(cell.value ? 'button' : undefined)}"
-             tabindex=${ifDefined(isSelectable ? (cell.active ? 0 : -1) : undefined)}
-             aria-label="${ifDefined(isSelectable && !isIE ? this.t(this.getCellLabelKey(cell), {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            value: parse(cell.value),
-            view: this.renderView
-        }) : undefined)}"
-             part="cell-content${isSelectable ? ' selection' : ''}"
-             .value=${cell.value}
-             .index=${cell.index}>${cell.text}</div>
-    </div>`;
-    }
-    /**
-     * Render view rows
-     * @param rows A collection of rows with cells
-     * @returns template result
-     */
-    renderRows(rows) {
-        return rows.map(row => html `<div role="row" part="row">${row.map(cell => this.renderCell(cell))}</div>`);
-    }
-    /**
-     * Render button navigation template
-     * @returns template result
-     */
-    get buttonNavigationTemplate() {
-        let prevBtnAriaLabel = this.t('PREVIOUS_MONTH');
-        let nextBtnAriaLabel = this.t('NEXT_MONTH');
-        let viewBtnAriaLabel = this.t('YEAR_SELECTOR');
-        switch (this.renderView) {
-            case RenderView.YEAR:
-                prevBtnAriaLabel = this.t('PREVIOUS_DECADE');
-                nextBtnAriaLabel = this.t('NEXT_DECADE');
-                viewBtnAriaLabel = this.t('DATE_SELECTOR');
-                break;
-            case RenderView.MONTH:
-                prevBtnAriaLabel = this.t('PREVIOUS_YEAR');
-                nextBtnAriaLabel = this.t('NEXT_YEAR');
-                viewBtnAriaLabel = this.t('DATE_SELECTOR');
-                break;
-            // RenderView.DAY
-            // no default
-        }
-        return html `<div part="navigation">
-        <ef-button
-          part="btn-prev"
-          aria-label="${prevBtnAriaLabel}"
-          icon="left"
-          @tap=${this.onPreviousTap}></ef-button>
-        <ef-button
-          ${ref(this.viewBtnRef)}
-          aria-description="${viewBtnAriaLabel}"
-          part="btn-view"
-          textpos="before"
-          .icon="${this.renderView === RenderView.DAY ? 'down' : 'up'}"
-          @tap="${this.onRenderViewTap}">${this.formattedViewRender}</ef-button>
-        <ef-button
-          part="btn-next"
-          aria-label="${nextBtnAriaLabel}"
-          icon="right"
-          @tap=${this.onNextTap}></ef-button>
-      </div>`;
-    }
-    /**
-     * A template used to notify currently selected value for screen readers
-     * @returns template result
-     */
-    get selectionTemplate() {
-        if (isIE || !this.announceValues) { /* IE11 has significant performance complications */
-            return;
-        }
-        return html `<div
-      part="aria-selection"
-      aria-live="polite"
-      aria-label="${this.value
-            ? this.range
-                ? this.t('SELECTED_RANGE', { from: parse(this.values[0]), to: this.values[1] ? parse(this.values[1]) : null })
-                : this.t('SELECTED_DATE', { value: parse(this.value), count: this.values.length })
-            : this.t('SELECTED_NONE', { multiple: this.multiple, range: this.range })}"></div>`;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-      ${guard([this.values, this.lang, this.range, this.multiple, this.announceValues], () => this.selectionTemplate)}
-      ${guard([this.view, this.renderView, this.lang], () => this.buttonNavigationTemplate)}
-      <div role="grid"
-           aria-multiselectable="${this.range || this.multiple}"
-           part="table"
-           @tap=${this.onTableTap}>${this.viewRender}</div>
-      <div part="footer"><slot name="footer"></slot></div>
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], Calendar.prototype, "min", null);
-__decorate([
-    property({ type: String })
-], Calendar.prototype, "max", null);
-__decorate([
-    property({ type: Boolean, attribute: 'weekdays-only' })
-], Calendar.prototype, "weekdaysOnly", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'weekends-only' })
-], Calendar.prototype, "weekendsOnly", void 0);
-__decorate([
-    property({ attribute: false })
-], Calendar.prototype, "filter", void 0);
-__decorate([
-    property({ type: String })
-], Calendar.prototype, "view", null);
-__decorate([
-    property({ type: Number, attribute: 'first-day-of-week' })
-], Calendar.prototype, "firstDayOfWeek", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Calendar.prototype, "range", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Calendar.prototype, "multiple", void 0);
-__decorate([
-    property({ type: String })
-], Calendar.prototype, "value", null);
-__decorate([
-    property({
-        converter: {
-            fromAttribute: function (value) {
-                return value.split(',');
-            }
-        }
-    })
-], Calendar.prototype, "values", null);
-__decorate([
-    property({ type: Boolean, attribute: 'fill-cells' })
-], Calendar.prototype, "fillCells", void 0);
-__decorate([
-    translate({ mode: 'directive', scope: CalendarLocaleScope })
-], Calendar.prototype, "dateT", void 0);
-__decorate([
-    translate({ mode: 'promise', scope: CalendarLocaleScope })
-], Calendar.prototype, "dateTPromise", void 0);
-__decorate([
-    translate({ mode: 'directive', scope: 'ef-calendar' })
-], Calendar.prototype, "t", void 0);
-__decorate([
-    state()
-], Calendar.prototype, "renderView", null);
-__decorate([
-    state()
-], Calendar.prototype, "activeCellIndex", null);
-__decorate([
-    state()
-], Calendar.prototype, "announceValues", void 0);
-Calendar = __decorate([
-    customElement('ef-calendar', {
-        alias: 'coral-calendar'
-    })
-], Calendar);
-export { Calendar };