@baloise/ds-core 19.9.4 → 20.0.0-next.4

package/dist/esm/bal-date-calendar_2.entry.js

@@ -1,1498 +0,0 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-BdVwMG9u.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import { a as waitAfterFramePaint, q as hasParent } from './helpers-BNj87EbG.js';
-import { L as Logger } from './log-CwssmmaV.js';
-import { p as padStart } from './index-BU7FUSdu.js';
-import { i as isNil } from './index-zWZxKBfo.js';
-import { B as BalDate, i as i18nBalDate, d as dateSeparator } from './date-W0XtD641.js';
-import { d as defaultConfig } from './config.default-RE8-gLMQ.js';
-import { L as ListenToConfig } from './config.decorator-3bfyZ-0Y.js';
-import { L as ListenToSwipe } from './swipe.decorator-B-pmjyNr.js';
-import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
-import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
-import { l as hasValueChanged, c as inputSetFocus, d as inputSetBlur } from './form-input-DYvzaBlM.js';
-import { N as NUMBER_KEYS } from './keys.constant-xVPGsAdF.js';
-import { I as INVALID_VALUE } from './mask-util-DuObDTix.js';
-import './browser-B1u-Mq75.js';
-import './config.utils-B7jugjyM.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-import './swipe.subject-BXuaiulg.js';
-import './device-TtMibDFL.js';
-import './listener-CClDIhvK.js';
-
-// Function to get the number of days in a month
-function getDaysInMonth(year, month) {
-    if (month < 1 || year < 0) {
-        return undefined;
-    }
-    return new Date(year, month, 0).getDate();
-}
-function isoDateOfDay(day, month, year) {
-    return `${year}-${padStart(`${month}`, 2, '0')}-${padStart(`${day}`, 2, '0')}`;
-}
-function isoDateOfToday() {
-    const today = new Date();
-    return `${today.getFullYear()}-${padStart(`${today.getMonth() + 1}`, 2, '0')}-${padStart(`${today.getDate()}`, 2, '0')}`;
-}
-// Function to generate the calendar grid
-function generateCalendarGrid(year, month, min, max, allowedDates) {
-    // Create an empty grid array
-    const grid = [];
-    // Get the number of days in the month
-    const numDays = getDaysInMonth(year, month);
-    const firstDay = getFirstDayOfMonth(year, month);
-    if (numDays !== undefined && firstDay) {
-        // Create a new Date object for the first day of the month
-        const isoToday = isoDateOfToday();
-        const dateMin = BalDate.fromISO(min);
-        const dateMax = BalDate.fromISO(max);
-        const allowedDate = (isoDate) => {
-            if (isNil(allowedDates)) {
-                return false;
-            }
-            return !allowedDates(isoDate);
-        };
-        // Fill the grid with day numbers
-        for (let day = 1; day <= numDays; day++) {
-            const isoDate = isoDateOfDay(day, month, year);
-            grid.push({
-                day,
-                month,
-                year,
-                isoDate,
-                fullDate: BalDate.fromISO(isoDate).toFormat(),
-                today: isoToday === isoDate,
-                disabled: dateMin.isAfter(isoDate) || dateMax.isBefore(isoDate) || allowedDate(isoDate),
-            });
-        }
-    }
-    return grid;
-}
-// Function to get the first weekday of the month
-function getFirstWeekdayOfMonth(year, month) {
-    if (month < 1 || year < 0) {
-        return 1;
-    }
-    // Create a new Date object with the given year and month
-    const date = new Date(year, month - 1, 1);
-    // Get the weekday of the first day of the month (0 - Sunday, 1 - Monday, ..., 6 - Saturday)
-    const weekday = date.getDay();
-    return weekday === 0 ? 7 : weekday;
-}
-function validateLanguage(language) {
-    if (['en', 'de', 'fr', 'it', 'nl', 'es', 'pl', 'pt', 'sv', 'fi'].includes(language)) {
-        return language;
-    }
-    return 'de';
-}
-// Function to generate the year list for the selection
-function generateYears(currentYear, minYear, maxYear) {
-    const list = [];
-    const today = new Date();
-    const todayYear = today.getFullYear();
-    for (let year = minYear; year <= maxYear; year++) {
-        list.push({
-            value: year,
-            label: `${year}`,
-            disabled: false,
-            today: todayYear === year,
-            selected: currentYear === year,
-        });
-    }
-    return list;
-}
-// Function to generate the month list for the selection
-function generateMonths(language, currentYear, selectedDate, min, max) {
-    const locale = validateLanguage(language);
-    const months = BalDate.infoMonths({ format: 'long', locale });
-    const selected = BalDate.fromISO(selectedDate);
-    const today = new Date();
-    const todayYear = today.getFullYear();
-    const todayMonth = today.getMonth() + 1;
-    let minMonth = 0;
-    if (min && currentYear !== undefined) {
-        const minDate = BalDate.fromISO(min);
-        if (minDate.isValid) {
-            if (currentYear > minDate.year) {
-                minMonth = 0; // all months are allowed
-            }
-            else {
-                minMonth = minDate.month || minMonth;
-            }
-        }
-    }
-    let maxMonth = 12;
-    if (max && currentYear !== undefined) {
-        const maxDate = BalDate.fromISO(max);
-        if (maxDate.isValid) {
-            if (currentYear < maxDate.year) {
-                maxMonth = 12; // all months are allowed
-            }
-            else {
-                maxMonth = maxDate.month || maxMonth;
-            }
-        }
-    }
-    return months.map((label, index) => {
-        const value = index + 1;
-        return {
-            label,
-            value,
-            today: value === todayMonth && currentYear === todayYear,
-            selected: value === selected.month && currentYear === selected.year,
-            disabled: value < minMonth || value > maxMonth,
-        };
-    });
-}
-// Function to generate the weekday header row with the label and the content
-function generateWeekDays(language) {
-    const locale = validateLanguage(language);
-    const weekdaysMin = BalDate.infoWeekdays({ format: 'short', locale });
-    const weekdays = BalDate.infoWeekdays({ format: 'long', locale });
-    return weekdaysMin.map((weekdayMin, index) => ({
-        ariaLabel: weekdays[index],
-        textContent: weekdayMin,
-    }));
-}
-function getFirstDayOfMonth(year, month) {
-    if (month < 1 || month > 12 || year < 0) {
-        return undefined;
-    }
-    return new Date(year, month - 1, 1);
-}
-
-const CalendarGrid = ({ isVisible, ref, grid, weekdays, selectedDate, firstDayOfWeek, onSelectDay, }) => {
-    const block = BEM.block('date-calendar');
-    const blockBody = block.element('body');
-    const blockBodyGrid = blockBody.element('grid');
-    return (h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) }, h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (h("span", { key: weekday.textContent, role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))), h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (h("bal-date-calendar-cell", Object.assign({ key: cell.isoDate }, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
-};
-
-const CalendarList = ({ name, isVisible, girdHeight, list, onSelect, ref, }) => {
-    const block = BEM.block('date-calendar');
-    const blockBody = block.element('body');
-    const blockBodyList = blockBody.element('list');
-    return (h("ul", { class: Object.assign(Object.assign(Object.assign({}, blockBodyList.class()), blockBodyList.modifier(name).class()), blockBodyList.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', style: {
-            height: `${girdHeight - 2 - 8 - 8}px`,
-        }, ref: el => (ref ? ref(el) : undefined) }, list.map(item => (h("li", { key: item.value, id: `${name}-${item.value}` }, h("button", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, blockBodyList.element('item').class()), blockBodyList.element('item').modifier('today').class(item.today)), blockBodyList.element('item').modifier('selected').class(item.selected)), blockBodyList.element('item').modifier('disabled').class(item.disabled)), disabled: item.disabled, tabIndex: -1, onClick: () => {
-            if (!item.disabled) {
-                onSelect(item);
-            }
-        } }, item.label))))));
-};
-
-const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, month, year, isCalendarVisible, isListVisible, onClickPreviousMonth, onClickNextMonth, }) => {
-    const block = BEM.block('date-calendar');
-    const blockNav = block.element('nav');
-    const nextMonthLabel = i18nBalDate[language].nextMonth;
-    const previousMonthLabel = i18nBalDate[language].previousMonth;
-    const selectMonthLabel = i18nBalDate[language].selectMonth;
-    return (h("div", { class: Object.assign({}, blockNav.class()) }, h("div", { class: Object.assign({}, blockNav.modifier('start').class()) }, h("button", { title: selectMonthLabel, "aria-label": selectMonthLabel, tabIndex: -1, "data-testid": "change-year-month", onClick: onClickSelectMonthAndYear }, h("span", null, monthFullNames[month - 1], " ", year), h("bal-icon", { name: "caret-up", color: "primary", size: "small", turn: isCalendarVisible }))), h("div", { class: Object.assign({}, blockNav.modifier('end').class()), style: {
-            display: isListVisible ? 'none' : 'flex',
-        } }, h("button", { title: previousMonthLabel, "aria-label": previousMonthLabel, onClick: onClickPreviousMonth, tabIndex: -1, "data-testid": "previous-month" }, h("bal-icon", { name: "caret-left", color: "primary", size: "small" })), h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-testid": "next-month" }, h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
-};
-
-const balDateCalendarCss = ":host{--bal-date-first-week-day:0;--bal-date-calendar-button-background:transparent;--bal-date-calendar-button-background-hover:var(--bal-color-light-blue-1);--bal-date-calendar-button-background-active:var(--bal-color-light-blue-2);--bal-date-calendar-button-color:var(--bal-color-text-primary);--bal-date-calendar-button-today-color:var(--bal-color-light-blue-3);--bal-date-calendar-button-today-color-hover:var(--bal-color-text-primary);--bal-date-calendar-button-today-color-active:var(--bal-color-text-primary);--bal-date-calendar-button-selected-background:var(--bal-color-primary);--bal-date-calendar-button-selected-color:var(--bal-color-text-white)}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;background:var(--bal-color-white);border-radius:var(--bal-radius-normal)}.bal-date-calendar__nav{display:-ms-flexbox;display:flex;width:calc(100% - 1rem);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-date-calendar-button-color);border:none;background:var(--bal-date-calendar-button-background);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;min-height:2rem;min-width:2rem;padding:.25rem;border-radius:var(--bal-button-radius);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{background:var(--bal-date-calendar-button-background-hover)}}.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{background:var(--bal-date-calendar-button-background-active)}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled){color:var(--bal-date-calendar-button-today-color);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{color:var(--bal-date-calendar-button-today-color-hover)}}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{color:var(--bal-date-calendar-button-today-color-active)}.bal-date-calendar__nav button--selected{background:var(--bal-date-calendar-button-selected-background);color:var(--bal-date-calendar-button-selected-color);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__nav button--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body{display:block}.bal-date-calendar__body__grid{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:.5rem;height:0;padding-top:0;padding-bottom:0;visibility:hidden}.bal-date-calendar__body__grid--visible{height:auto;padding-top:.5rem;padding-bottom:.5rem;visibility:visible}.bal-date-calendar__body__grid__head{position:relative;display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-date-calendar__body__grid__head::after{position:absolute;content:\"\";height:2px;width:calc(100% + 1rem);bottom:0;left:-0.5rem;right:-0.5rem;background:var(--bal-color-border)}.bal-date-calendar__body__grid__head span{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:2rem;width:2rem;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-wrap:nowrap}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:.5rem}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell{width:2rem;height:2rem;text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell:first-child{grid-column:var(--bal-date-first-week-day)}.bal-date-calendar__body__list{display:none;list-style:none;margin:0;padding:0;-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:calc(100% - 1rem);overflow-y:auto;max-height:18rem;position:relative;padding:.5rem;border-top:2px solid var(--bal-color-border)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-date-calendar-button-color);border:none;background:var(--bal-date-calendar-button-background);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:100%}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{background:var(--bal-date-calendar-button-background-hover)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{background:var(--bal-date-calendar-button-background-active)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled){color:var(--bal-date-calendar-button-today-color);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{color:var(--bal-date-calendar-button-today-color-hover)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{color:var(--bal-date-calendar-button-today-color-active)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected{background:var(--bal-date-calendar-button-selected-background);color:var(--bal-date-calendar-button-selected-color);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body__list--visible{display:grid}.bal-date-calendar__body__list--year{grid-template-columns:repeat(4, 1fr)}.bal-date-calendar__body__list--month{grid-template-columns:repeat(2, 1fr)}.bal-date-calendar-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-date-calendar-button-color);border:none;background:var(--bal-date-calendar-button-background);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:2rem;height:2rem}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{background:var(--bal-date-calendar-button-background-hover)}}.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{background:var(--bal-date-calendar-button-background-active)}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled){color:var(--bal-date-calendar-button-today-color);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{color:var(--bal-date-calendar-button-today-color-hover)}}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{color:var(--bal-date-calendar-button-today-color-active)}.bal-date-calendar-cell--selected{background:var(--bal-date-calendar-button-selected-background);color:var(--bal-date-calendar-button-selected-color);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar-cell--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}";
-
-const DateCalendar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.oldMin = '';
-        this.oldMax = '';
-        this.selectedDate = '';
-        this.monthFullNames = [];
-        this.weekdays = [];
-        this.months = [];
-        this.years = [];
-        this.calendarGrid = [];
-        this.firstDayOfWeek = 0;
-        this.month = 0;
-        this.year = 0;
-        this.language = defaultConfig.language;
-        this.isCalendarVisible = true;
-        this.isYearListVisible = false;
-        this.isMonthListVisible = false;
-        /**
-         * Callback to determine which date in the datepicker should be selectable.
-         */
-        this.allowedDates = undefined;
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onSelectDay = (isoDate) => {
-            this.valueChanged(isoDate, this.selectedDate);
-            this.balChange.emit(this.selectedDate);
-        };
-        this.onClickNextMonth = () => {
-            let nextYear = this.year;
-            let nextMonth = this.month + 1;
-            if (nextMonth > 12) {
-                nextMonth = 1;
-                nextYear = nextYear + 1;
-            }
-            this.generateGridByMonthAndYear(nextMonth, nextYear);
-        };
-        this.onClickPreviousMonth = () => {
-            let nextYear = this.year;
-            let nextMonth = this.month - 1;
-            if (nextMonth < 1) {
-                nextMonth = 12;
-                nextYear = nextYear - 1;
-            }
-            this.generateGridByMonthAndYear(nextMonth, nextYear);
-        };
-        this.onClickSelectMonthAndYear = async () => {
-            this.updateSelections();
-            if (this.isCalendarVisible === true) {
-                this.isCalendarVisible = false;
-                this.isYearListVisible = true;
-                this.isMonthListVisible = false;
-                await waitAfterFramePaint();
-                if (this.yearListEl) {
-                    const selectedYearEl = this.yearListEl.querySelector(`#year-${this.year}`);
-                    if (selectedYearEl) {
-                        const rowHeight = 26 + 8 + 4;
-                        this.yearListEl.scrollTop = selectedYearEl.offsetTop - rowHeight * 2;
-                    }
-                    else {
-                        this.yearListEl.scrollTop = 0;
-                    }
-                }
-            }
-            else {
-                this.isCalendarVisible = true;
-                this.isYearListVisible = false;
-                this.isMonthListVisible = false;
-            }
-        };
-        this.onClickYear = (newYear) => {
-            this.isYearListVisible = false;
-            this.isMonthListVisible = true;
-            this.generateGridByMonthAndYear(this.month, newYear);
-            this.months = generateMonths(this.language, newYear, this.selectedDate, this.min, this.max);
-        };
-        this.onClickMonth = (newMonth) => {
-            this.isYearListVisible = false;
-            this.isMonthListVisible = false;
-            this.isCalendarVisible = true;
-            this.generateGridByMonthAndYear(newMonth, this.year);
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    valueChanged(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            const date = BalDate.fromISO(newValue);
-            if (!date.isValid) {
-                this.generateGridByDefaultDate();
-                this.selectedDate = '';
-            }
-            else {
-                this.generateGridByDate(date);
-                this.selectedDate = date.toISODate();
-            }
-            this.updateSelections();
-        }
-    }
-    rangePropChanged() {
-        this.updateSelections();
-        this.generateGrid();
-    }
-    yearRangePropChanged() {
-        this.updateSelections();
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.generateGridByDefaultDate();
-        this.valueChanged(this.value, undefined);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.language = state.language;
-        this.monthFullNames = BalDate.infoMonths({ format: 'long', locale: this.language });
-        this.weekdays = generateWeekDays(this.language);
-        this.updateSelections();
-    }
-    swipeListener({ left, right }) {
-        if (left) {
-            this.onClickNextMonth();
-        }
-        else if (right) {
-            this.onClickPreviousMonth();
-        }
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    get minYear() {
-        if (this.minYearProp === undefined) {
-            const today = new Date();
-            const year = today.getFullYear();
-            const defaultMinYear = year - 100;
-            if (this.min) {
-                const date = BalDate.fromISO(this.min);
-                return date.year || defaultMinYear;
-            }
-            else {
-                return defaultMinYear;
-            }
-        }
-        return this.minYearProp;
-    }
-    get maxYear() {
-        if (this.maxYearProp === undefined) {
-            const today = new Date();
-            const year = today.getFullYear();
-            const defaultMaxYear = year + 50;
-            if (this.max) {
-                const date = BalDate.fromISO(this.max);
-                return date.year || defaultMaxYear;
-            }
-            else {
-                return defaultMaxYear;
-            }
-        }
-        return this.maxYearProp;
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    updateSelections() {
-        this.years = generateYears(this.year, this.minYear, this.maxYear);
-        this.months = generateMonths(this.language, this.year, this.selectedDate, this.min, this.max);
-    }
-    generateGrid() {
-        const date = BalDate.fromISO(this.value);
-        if (date.isValid) {
-            this.generateGridByDate(date);
-        }
-        else {
-            this.generateGridByDefaultDate();
-        }
-    }
-    generateGridByDate(date) {
-        if (date.year !== undefined && date.month !== undefined) {
-            this.generateGridByMonthAndYear(date.month, date.year);
-        }
-    }
-    generateGridByDefaultDate() {
-        const date = BalDate.fromISO(this.defaultDate);
-        if (date.isValid) {
-            this.generateGridByDate(date);
-        }
-        else {
-            const today = new Date();
-            this.month = today.getMonth() + 1;
-            this.year = today.getFullYear();
-            this.calendarGrid = generateCalendarGrid(this.year, this.month, this.min, this.max, this.allowedDates);
-            this.firstDayOfWeek = getFirstWeekdayOfMonth(this.year, this.month);
-        }
-    }
-    generateGridByMonthAndYear(month, year) {
-        // Only generate when mont and year has changed
-        if (this.month !== month || this.year !== year || this.oldMin !== this.min || this.oldMax !== this.max) {
-            this.calendarGrid = generateCalendarGrid(year, month, this.min, this.max, this.allowedDates);
-            this.firstDayOfWeek = getFirstWeekdayOfMonth(year, month);
-        }
-        this.month = month;
-        this.year = year;
-        this.oldMin = this.min;
-        this.oldMax = this.max;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        var _a;
-        const girdHeight = ((_a = this.gridEl) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
-        const block = BEM.block('date-calendar');
-        const blockBody = block.element('body');
-        const blockFoot = block.element('foot');
-        return (h(Host, { key: '34efddf3c88e5470dcefd22c5cab262873d07de8', class: Object.assign({}, block.class()) }, h(CalendarNav, { key: '9c8942a95ff9f1c8fdc8b1e153a29632145d1c2b', language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), h("div", { key: '6a2cb7bba9c0568c1dc31d8b1c811b90c5845dce', class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { key: 'a687e1e1f80bc8ea21bdc7ad4709537829005843', isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), h(CalendarList, { key: 'cba1e282fb92f5edfa04e97eefcf9b38b57b8428', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { key: 'ae7cb47aaffec3d3a91d1aab96f1fbdde34b7e6f', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { key: '6e455964845a4e57abc793cb78916ed51fa0bdb3', class: Object.assign({}, blockFoot.class()) }, h("slot", { key: '277a09ef4cb10f6f051c84b1ba9f9ae79f0d3479' }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "min": ["rangePropChanged"],
-        "max": ["rangePropChanged"],
-        "minYearProp": ["yearRangePropChanged"],
-        "maxYearProp": ["yearRangePropChanged"]
-    }; }
-};
-__decorate([
-    Logger('bal-date-calendar'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], DateCalendar.prototype, "createLogger", null);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], DateCalendar.prototype, "configChanged", null);
-__decorate([
-    ListenToSwipe({ mobileOnly: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], DateCalendar.prototype, "swipeListener", null);
-DateCalendar.style = balDateCalendarCss;
-
-class MaskPosition {
-    constructor(_options) {
-        this._options = _options;
-        this._position = 0;
-        this._positionEnd = 0;
-        this._isRangeSelection = false;
-        if (_options.component && _options.component.nativeInput) {
-            this._position = _options.component.nativeInput.selectionStart || 0;
-            this._positionEnd = _options.component.nativeInput.selectionEnd || 0;
-            this._isRangeSelection = this._position !== this._positionEnd;
-        }
-    }
-    get isRangeSelection() {
-        return this._isRangeSelection;
-    }
-    get value() {
-        if (this._options.isBackspace && this._position > 0) {
-            return this._position - 1;
-        }
-        return this._position;
-    }
-    set value(index) {
-        const validatedIndex = index < 0 ? 0 : index > this._options.mask.maxLength ? this._options.mask.maxLength : index;
-        this._position = validatedIndex;
-    }
-    toStart() {
-        this.value = 0;
-    }
-    toEnd() {
-        const target = this.getTarget();
-        if (target) {
-            this.value = target.value.length;
-        }
-    }
-    next(next = 1) {
-        const newPosition = this._position + next;
-        if (newPosition <= this._options.mask.maxLength) {
-            this._position = newPosition;
-        }
-        return this._position;
-    }
-    previous(previous = 1) {
-        const newPosition = this._position - previous;
-        if (newPosition >= 0) {
-            this._position = newPosition;
-        }
-        else {
-            this._position = 0;
-        }
-        return this._position;
-    }
-    submit() {
-        const target = this.getTarget();
-        if (target && target.selectionStart !== this._position && target.selectionEnd !== this._position) {
-            target.selectionStart = this._position;
-            target.selectionEnd = this._position;
-        }
-    }
-    getTarget() {
-        if (this._options.component && this._options.component.nativeInput) {
-            return this._options.component.nativeInput;
-        }
-        return undefined;
-    }
-}
-
-class MaskContext {
-    constructor(_options) {
-        this._options = _options;
-        this._value = '';
-        if (this._options.component && this._options.component.nativeInput) {
-            this._value = this._options.component.nativeInput.value;
-        }
-        this.position = new MaskPosition(this._options);
-        this.component = this._options.component;
-    }
-    get target() {
-        if (this._options.component && this._options.component.nativeInput) {
-            return this._options.component.nativeInput;
-        }
-        return undefined;
-    }
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        this._value = newValue;
-    }
-    get focused() {
-        return this._options.component.focused;
-    }
-    isValueEmpty() {
-        return this.value === '' || this.value === undefined || this.value === null;
-    }
-    preventDefault() {
-        if (this._options.event.preventDefault) {
-            this._options.event.preventDefault();
-        }
-    }
-    stopPropagation() {
-        this.preventDefault();
-        if (this._options.event.stopPropagation) {
-            this._options.event.stopPropagation();
-        }
-    }
-    async submit(eventType = 'input', parsedValue) {
-        if (this.target) {
-            this.target.value = this.value;
-            if (eventType !== 'blur' && eventType !== 'tab') {
-                this.position.submit();
-            }
-            if (this._options.component) {
-                if (eventType === 'input' || eventType === 'tab') {
-                    this._options.component.balInput.emit(this.value);
-                }
-                if ((eventType === 'change' || eventType === 'blur') && parsedValue !== undefined) {
-                    if (hasValueChanged(this._options.component.value, parsedValue)) {
-                        this._options.component.value = parsedValue;
-                        this._options.component.balChange.emit(parsedValue);
-                    }
-                }
-            }
-        }
-    }
-}
-
-class MaskClipboardContext extends MaskContext {
-    get clipboardData() {
-        var _a;
-        return (_a = this._options.event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
-    }
-}
-
-class MaskFocusContext extends MaskContext {
-}
-
-class MaskKeyboardContext extends MaskContext {
-    get key() {
-        return this._options.event.key;
-    }
-    get isCtrlOrCommandKey() {
-        return this._options.event.metaKey || this._options.event.ctrlKey;
-    }
-    get isBackspaceKey() {
-        return this._options.event.key === 'Backspace';
-    }
-    get isTabKey() {
-        return this._options.event.key === 'Tab';
-    }
-    get isWhiteSpaceKey() {
-        return this._options.event.key === ' ';
-    }
-    get isDeleteKey() {
-        return this._options.event.key === 'Delete' || this._options.event.key === 'Del';
-    }
-    get isNumberKey() {
-        return MaskKeyboardContext.NUMBER_KEYS.includes(this._options.event.key);
-    }
-    get isNavigationKey() {
-        return MaskKeyboardContext.NAVIGATION_KEYS.includes(this._options.event.key);
-    }
-    get isSelectAllCommand() {
-        return (this._options.event.ctrlKey || this._options.event.metaKey) && this.key === 'a';
-    }
-    get isCopyCommand() {
-        return (this._options.event.ctrlKey || this._options.event.metaKey) && this.key === 'c';
-    }
-    get isPasteCommand() {
-        return (this._options.event.ctrlKey || this._options.event.metaKey) && this.key === 'v';
-    }
-    getCharAt(position = this.position.value) {
-        return this.value.charAt(position);
-    }
-    getCharAtBackspacePosition() {
-        return this.getCharAt(this.position.value - 1);
-    }
-    setChar(char = this._options.event.key, position = this.position.value) {
-        this.value = this.value.substring(0, position) + char + this.value.substring(position + 1);
-    }
-}
-MaskKeyboardContext.NUMBER_KEYS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-MaskKeyboardContext.NAVIGATION_KEYS = [
-    'Home',
-    'End',
-    'ArrowLeft',
-    'Left',
-    'ArrowRight',
-    'Right',
-    'Tab',
-    'Enter',
-    'Esc',
-    'Escape',
-];
-
-class MaskLocaleContext extends MaskContext {
-    get locale() {
-        return this._options.event.locale;
-    }
-}
-
-class MaskMouseContext extends MaskContext {
-}
-
-class MaskValueChangedContext extends MaskContext {
-    get newValue() {
-        return this._options.event.newValue;
-    }
-    get oldValue() {
-        return this._options.event.oldValue;
-    }
-    get didValueChange() {
-        return this.newValue !== this.oldValue;
-    }
-}
-
-class MaskBlock {
-    constructor(option) {
-        this._isSeparator = false;
-        this._allowedKeys = [];
-        this._locale = 'de-CH';
-        this._from = option.from || 0;
-        this._to = option.to || 0;
-        this._isSeparator = option.isSeparator === undefined ? false : option.isSeparator;
-        this._mask = option.mask || '_';
-        this._allowedKeys = option.allowedKeys ? option.allowedKeys : this.allowedKeys;
-        this._format = option.format;
-    }
-    format(value) {
-        if (this._format) {
-            return this._format(value.replace(this.mask, ''), this._locale, this.mask);
-        }
-        return value;
-    }
-    get isSeparator() {
-        return this._isSeparator;
-    }
-    get to() {
-        return this._to;
-    }
-    get from() {
-        return this._from;
-    }
-    get mask() {
-        if (typeof this._mask === 'function') {
-            return this._mask(this._locale);
-        }
-        return this._mask;
-    }
-    get allowedKeys() {
-        return this._allowedKeys;
-    }
-    onI18nChange(locale) {
-        this._locale = locale;
-    }
-    getValueOfTheBlock(value) {
-        return value.slice(this._from, this._to);
-    }
-    isTouched(value) {
-        const blockValue = this.getValueOfTheBlock(value);
-        return !blockValue.split('').every(char => char === this.mask);
-    }
-    verifyAllowedKeyHits(key) {
-        if (this.isSeparator && key === this.mask) {
-            return true;
-        }
-        else if (this.allowedKeys.indexOf(key) >= 0) {
-            return true;
-        }
-        else {
-            // context.stopPropagation()
-            return false;
-        }
-    }
-}
-
-class MaskBlockList {
-    constructor(_list = []) {
-        this._list = _list;
-    }
-    get lastPosition() {
-        return this._list[this._list.length - 1].to;
-    }
-    get list() {
-        return this._list;
-    }
-    set list(list) {
-        this._list = list;
-    }
-    clone() {
-        return new MaskBlockList([...this._list]);
-    }
-    findByIndex(index, blocks = this.list) {
-        return blocks.find(block => block.from <= index && index < block.to);
-    }
-    getPlaceholderMask() {
-        const placeholder = [];
-        this.list.forEach(block => {
-            const length = block.to - block.from;
-            for (let index = 0; index < length; index++) {
-                placeholder.push(block.mask);
-            }
-        });
-        return placeholder.join('');
-    }
-    getRawValueWithoutMaskByContext(context) {
-        return this.getRawValueWithoutMask(context.value);
-    }
-    getRawValueWithoutMask(value) {
-        if (value) {
-            let rawValue = [];
-            const chars = value.split('');
-            for (let index = 0; index < chars.length; index++) {
-                const char = chars[index];
-                const block = this.findByIndex(index);
-                if (block && !block.isSeparator) {
-                    rawValue.push(char.replace(block.mask, ''));
-                }
-                else {
-                    rawValue.push(char);
-                }
-            }
-            rawValue = rawValue.filter(v => v);
-            const amountSeparators = this.list.filter(block => block.isSeparator).length;
-            if (amountSeparators === rawValue.length) {
-                return '';
-            }
-            return rawValue.join('');
-        }
-        return '';
-    }
-    formatBlocks(value, activeBlockIndex) {
-        let newValue = `${value}`;
-        for (let index = 0; index < this.list.length; index++) {
-            const block = this.list[index];
-            if (activeBlockIndex !== index && !block.isSeparator && block.isTouched(newValue)) {
-                const blockValue = block.getValueOfTheBlock(newValue);
-                const newBlockValue = block.format(blockValue);
-                newValue = newValue.substring(0, block.from) + newBlockValue + newValue.substring(block.to);
-            }
-        }
-        return newValue;
-    }
-    getBlockIndexFromPosition(position) {
-        const length = this.list.reduce((acc, block) => acc + block.to - block.from, 0);
-        if (position === length) {
-            return this.list.length - 1;
-        }
-        const index = this.list.findIndex(block => block.from <= position && position < block.to);
-        return index < 0 ? undefined : Math.min(length, index);
-    }
-    verifyCallOfNextSeparator(key, index) {
-        if (this.list.length - 1 > index) {
-            const nextBlock = this.list[index + 1];
-            if (nextBlock.isSeparator && nextBlock.mask === key) {
-                return true;
-            }
-        }
-        return false;
-    }
-}
-
-class AbstractMask {
-    constructor(blocks = []) {
-        this.inputMode = 'text';
-        this.locale = 'de-CH';
-        this.blocks = new MaskBlockList(blocks);
-    }
-    /**
-     * ABSTRACT EVENT METHODS
-     * ------------------------------------------------------
-     */
-    onLocaleChange(context, _oldLocale, oldBlocks) {
-        if (context.target) {
-            const value = context.value;
-            const chars = value.split('');
-            for (let index = 0; index < chars.length; index++) {
-                const char = chars[index];
-                const newBlock = this.blocks.findByIndex(index);
-                const oldBlock = oldBlocks.findByIndex(index);
-                if (newBlock && oldBlock) {
-                    if (newBlock.isSeparator) {
-                        chars[index] = newBlock.mask;
-                    }
-                    else if (char === oldBlock.mask) {
-                        chars[index] = newBlock.mask;
-                    }
-                }
-            }
-            context.value = chars.join('');
-        }
-    }
-    onFocus(_context) {
-        // empty placeholder
-    }
-    onBlur(_context) {
-        // empty placeholder
-    }
-    onChange(context) {
-        context.submit('change', this.onParseValue(context.value));
-    }
-    onNavigationDown(_context, _block, _index) {
-        // empty placeholder
-    }
-    onSelectAll(_context, _block, _index) {
-        // empty placeholder
-    }
-    onPaste(context, _block, _index) {
-        const value = context.clipboardData || '';
-        context.value = value;
-        context.position.toEnd();
-    }
-    onBlockChange(context, block, index) {
-        context.setChar();
-        context.position.next();
-        const nextBlock = this.blocks.list[index + 1];
-        if (context.position.value === block.to && nextBlock && nextBlock.isSeparator) {
-            context.position.next();
-        }
-    }
-    onBackspaceDown(context, block, index) {
-        context.position.previous();
-        if (!block.isSeparator) {
-            context.setChar(block.mask);
-            const previousBlock = this.blocks.list[index - 1];
-            if (context.position.value === block.from && previousBlock && previousBlock.isSeparator) {
-                context.position.previous();
-            }
-        }
-    }
-    onDeleteDown(context, block, index) {
-        context.setChar(block.mask);
-        context.position.next();
-        const nextBlock = this.blocks.list[index + 1];
-        if (context.position.value === block.to && nextBlock && nextBlock.isSeparator) {
-            context.position.next();
-        }
-    }
-    onValueChanged(context) {
-        const formattedValue = this.onFormatValue(context.newValue);
-        const inputValue = context.focused && formattedValue === '' ? this.blocks.getPlaceholderMask() : formattedValue;
-        context.value = inputValue;
-        context.position.toEnd();
-    }
-    onParseValue(inputValue, options = { allowInvalidValue: false }) {
-        if (inputValue) {
-            return inputValue.trim();
-        }
-        return inputValue || '';
-    }
-    onFormatValue(rawValue) {
-        if (rawValue) {
-            return rawValue.trim();
-        }
-        return rawValue || '';
-    }
-    /**
-     * UTILS
-     * ------------------------------------------------------
-     */
-    toParsedValue(inputValue) {
-        return this.onParseValue(inputValue);
-    }
-    toFormattedValue(inputValue) {
-        return this.onFormatValue(inputValue);
-    }
-    /**
-     * FIRE EVENT METHODS
-     * ------------------------------------------------------
-     */
-    fireI18nChange(context) {
-        const oldBlocks = this.blocks.clone();
-        const oldLocale = `${context.locale}`;
-        this.locale = context.locale;
-        this.blocks.list.forEach(block => block.onI18nChange(context.locale));
-        this.onLocaleChange(context, oldLocale, oldBlocks);
-    }
-    fireValueChanged(context) {
-        if (context.didValueChange) {
-            this.onValueChanged(context);
-        }
-    }
-    firePaste(context) {
-        const index = this.blocks.getBlockIndexFromPosition(context.position.value);
-        if (index !== undefined) {
-            const currentBlock = this.blocks.list[index];
-            this.onPaste(context, currentBlock, index);
-            this.onChange(context);
-        }
-    }
-    fireClick(context) {
-        const maskPlaceholder = this.blocks.getPlaceholderMask();
-        if (maskPlaceholder === context.value) {
-            context.position.toStart();
-        }
-    }
-    fireFocus(context) {
-        if (context.target && context.isValueEmpty()) {
-            this.resetInputValueWithMask(context);
-        }
-        this.onFocus(context);
-    }
-    fireBlur(context) {
-        if (context.target) {
-            if (this.isValueEmptyMask(context)) {
-                this.emptyInputValue(context);
-            }
-            else {
-                this.onBlur(context);
-                context.submit('blur', this.onParseValue(context.value, { allowInvalidValue: context.component.allowInvalidValue }));
-            }
-        }
-    }
-    fireKeyDown(context) {
-        const position = context.isBackspaceKey ? Math.max(0, context.position.value - 1) : context.position.value;
-        const index = this.blocks.getBlockIndexFromPosition(position);
-        // prevent of adding more chars than possible
-        if (position >= this.blocks.lastPosition && !context.isNavigationKey && !context.isSelectAllCommand) {
-            context.preventDefault();
-            context.stopPropagation();
-            return;
-        }
-        if (index !== undefined && !context.position.isRangeSelection) {
-            const currentBlock = this.blocks.list[index];
-            //
-            // Navigation keys like arrows and tabs
-            if (context.isNavigationKey) {
-                this.onNavigationDown(context, currentBlock, index);
-                //
-                // Select the whole value of the input
-            }
-            else if (context.isSelectAllCommand) {
-                this.onSelectAll(context, currentBlock, index);
-                //
-                // On copy a the value
-            }
-            else if (context.isCopyCommand) ;
-            else if (context.isPasteCommand) ;
-            else if (context.isBackspaceKey) {
-                context.preventDefault();
-                this.onBackspaceDown(context, currentBlock, index);
-                //
-                // On delete to remove a next char
-            }
-            else if (context.isDeleteKey) {
-                context.preventDefault();
-                this.onDeleteDown(context, currentBlock, index);
-                //
-                // On double space key hit only happens on mac
-            }
-            else if (context.isWhiteSpaceKey) {
-                context.preventDefault();
-                const lastWrittenChar = context.value[context.position.value];
-                if (lastWrittenChar === '.') {
-                    context.stopPropagation();
-                    const value = context.value;
-                    context.value = value.substring(0, context.position.value) + '_' + value.substring(context.position.value + 1);
-                }
-                //
-                // On a normal key down with the allowed key hits
-            }
-            else if (currentBlock.verifyAllowedKeyHits(context.key)) {
-                context.preventDefault();
-                this.onBlockChange(context, currentBlock, index);
-                //
-                // if the user hits the next separator we jump to the next user block
-            }
-            else if (this.blocks.verifyCallOfNextSeparator(context.key, index)) {
-                context.preventDefault();
-                const activeBlock = this.blocks.list[index];
-                if (context.position.value > activeBlock.from) {
-                    const nextBlock = this.blocks.list[index + 1];
-                    const value = context.value;
-                    const blockValue = currentBlock.getValueOfTheBlock(value);
-                    const newBlockValue = currentBlock.format(blockValue);
-                    context.value = value.substring(0, currentBlock.from) + newBlockValue + value.substring(currentBlock.to);
-                    context.position.value = nextBlock.to;
-                }
-            }
-            //
-            // format all blocks where the cursor is not active
-            const newIndex = this.blocks.getBlockIndexFromPosition(context.position.value);
-            if (newIndex && !context.isBackspaceKey) {
-                const newFormattedValue = this.blocks.formatBlocks(context.value, newIndex);
-                const position = context.position.value;
-                context.value = newFormattedValue;
-                context.position.value = position;
-            }
-            //
-            // hit a range of chars
-        }
-        else {
-            if (!context.isTabKey) {
-                context.preventDefault();
-            }
-            if (context.isBackspaceKey || context.isDeleteKey) {
-                this.resetInputValueWithMask(context);
-            }
-            else if (this.blocks.list[0].verifyAllowedKeyHits(context.key)) {
-                this.onBlockChange(context, this.blocks.list[0], 0);
-            }
-        }
-    }
-    /**
-     * PROTECTED HELPER METHODS
-     * ------------------------------------------------------
-     */
-    resetInputValueWithMask(context) {
-        context.value = this.blocks.getPlaceholderMask();
-        context.position.toStart();
-    }
-    isValueEmptyMask(context) {
-        const placeholder = this.blocks.getPlaceholderMask();
-        return placeholder === context.value;
-    }
-    emptyInputValue(context) {
-        context.value = '';
-        context.submit('blur', context.value);
-    }
-}
-
-class DateMask extends AbstractMask {
-    constructor() {
-        super([
-            new MaskBlock({
-                from: 0,
-                to: 2,
-                allowedKeys: [...NUMBER_KEYS],
-                format: (value, _locale, mask) => {
-                    if (Number.isNaN(parseInt(value, 10))) {
-                        return `${mask}${mask}`;
-                    }
-                    return value.padStart(2, '0');
-                },
-                mask: locale => {
-                    return this.dayMask[locale.split('-')[0]] || this.dayMask['de'];
-                },
-            }),
-            new MaskBlock({ from: 2, to: 3, mask: locale => dateSeparator(locale), isSeparator: true }),
-            new MaskBlock({
-                from: 3,
-                to: 5,
-                allowedKeys: [...NUMBER_KEYS],
-                format: (value, _locale, mask) => {
-                    if (Number.isNaN(parseInt(value, 10))) {
-                        return `${mask}${mask}`;
-                    }
-                    return value.padStart(2, '0');
-                },
-                mask: locale => this.monthMask[locale.split('-')[0]] || this.monthMask['de'],
-            }),
-            new MaskBlock({ from: 5, to: 6, mask: locale => dateSeparator(locale), isSeparator: true }),
-            new MaskBlock({
-                from: 6,
-                to: 10,
-                allowedKeys: [...NUMBER_KEYS],
-                mask: locale => this.yearMask[locale.split('-')[0]] || this.yearMask['de'],
-            }),
-        ]);
-        this.maxLength = 10;
-        this.minLength = 10;
-        this.inputMode = 'decimal';
-        this.dayMask = {
-            de: 'T',
-            en: 'D',
-            fr: 'J',
-            it: 'G',
-            nl: 'D',
-            es: 'D',
-            pl: 'D',
-            pt: 'D',
-            sv: 'D',
-            fi: 'M',
-        };
-        this.monthMask = {
-            de: 'M',
-            en: 'M',
-            fr: 'M',
-            it: 'M',
-            nl: 'M',
-            es: 'M',
-            pl: 'M',
-            pt: 'M',
-            sv: 'M',
-            fi: 'K',
-        };
-        this.yearMask = {
-            de: 'J',
-            en: 'Y',
-            fr: 'A',
-            it: 'A',
-            nl: 'J',
-            es: 'A',
-            pl: 'R',
-            pt: 'A',
-            sv: 'Å',
-            fi: 'V',
-        };
-    }
-    onParseValue(inputValue, options = { allowInvalidValue: false }) {
-        if (inputValue) {
-            const date = BalDate.fromAnyFormat(this.blocks.getRawValueWithoutMask(inputValue));
-            if (date.isValid) {
-                return date.toISODate();
-            }
-            else if (options && options.allowInvalidValue) {
-                return INVALID_VALUE;
-            }
-        }
-        return '';
-    }
-    onFormatValue(isoDate) {
-        if (isoDate) {
-            const date = BalDate.fromISO(isoDate);
-            if (date.isValid) {
-                return date.toFormat();
-            }
-        }
-        return '';
-    }
-    onPaste(context, _block, _index) {
-        const value = context.clipboardData || '';
-        const date = BalDate.fromAnyFormat(value);
-        if (date.isValid) {
-            context.value = date.toFormat();
-            context.position.toEnd();
-        }
-    }
-    onBlur(context) {
-        const rawValue = this.blocks.getRawValueWithoutMaskByContext(context);
-        const date = BalDate.fromAnyFormat(rawValue);
-        if (date.isValid) {
-            const formattedDate = date.toFormat();
-            if (formattedDate !== context.value) {
-                context.value = formattedDate;
-            }
-        }
-        else if (context.component.allowInvalidValue) {
-            if (rawValue !== context.value) {
-                context.value = rawValue;
-            }
-        }
-    }
-}
-
-class MaskComponentAdapter {
-    constructor(mask) {
-        this.mask = mask;
-    }
-    get attributes() {
-        return {
-            inputMode: this.mask.inputMode,
-            maxLength: this.mask.maxLength,
-            minLength: this.mask.minLength,
-            type: 'text',
-            autoCapitalize: 'off',
-            autoCorrect: 'off',
-            spellcheck: false,
-        };
-    }
-    bindComponent(component) {
-        this.component = component;
-    }
-    bindComponentDidLoad() {
-        if (this.component && this.component.nativeInput) {
-            this.component.nativeInput.value = this.component.value || '';
-        }
-        this.bindValueChanged(this.component.value, undefined);
-    }
-    bindConfigChanged(config) {
-        const { component, mask } = this;
-        const context = new MaskLocaleContext({
-            component,
-            mask,
-            event: {
-                locale: `${config.language}-${config.region}`,
-            },
-        });
-        this.mask.fireI18nChange(context);
-        context.submit();
-    }
-    bindValueChanged(newValue, oldValue) {
-        const { component, mask } = this;
-        const context = new MaskValueChangedContext({
-            component,
-            mask,
-            event: { newValue, oldValue },
-        });
-        this.mask.fireValueChanged(context);
-        context.submit('blur');
-    }
-    bindKeyDown(event) {
-        if (this.isComponentAccessible) {
-            const { component, mask } = this;
-            const context = new MaskKeyboardContext({ event, component, mask });
-            this.mask.fireKeyDown(context);
-            const isTabKey = event.key === 'Tab';
-            context.submit(isTabKey ? 'tab' : 'input');
-            component.balKeyPress.emit(event);
-        }
-    }
-    bindFocus(event) {
-        if (this.isComponentAccessible) {
-            const { component, mask } = this;
-            component.focused = true;
-            const context = new MaskFocusContext({ event, component, mask });
-            this.mask.fireFocus(context);
-            context.submit();
-            component.balFocus.emit(event);
-        }
-    }
-    bindBlur(event) {
-        if (this.isComponentAccessible) {
-            const { component, mask } = this;
-            component.focused = false;
-            const context = new MaskFocusContext({ event, component, mask });
-            this.mask.fireBlur(context);
-            context.submit('blur');
-            component.balBlur.emit(event);
-        }
-    }
-    bindPaste(event) {
-        if (this.isComponentAccessible) {
-            const { component, mask } = this;
-            const context = new MaskClipboardContext({ event, component, mask });
-            this.mask.firePaste(context);
-            context.submit();
-        }
-    }
-    bindFormReset(event) {
-        const formElement = event.target;
-        if (formElement && (formElement === this.component.el || formElement.contains(this.component.el))) {
-            this.component.value = this.component.initialValue;
-            this.component.inputValue = this.component.initialValue;
-            clearTimeout(this.resetHandlerTimer);
-            this.resetHandlerTimer = setTimeout(() => {
-                if (this.component.nativeInput) {
-                    this.component.nativeInput.value = this.mask.toFormattedValue(this.component.value || '');
-                }
-            });
-        }
-    }
-    bindClick(event) {
-        if (this.isComponentAccessible) {
-            const { component, mask } = this;
-            const context = new MaskMouseContext({ event, component, mask });
-            this.mask.fireClick(context);
-            context.submit();
-        }
-    }
-    bindHostClick(event) {
-        if (!this.isComponentAccessible) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    bindGlobalClick(event) {
-        if (!this.isComponentAccessible) {
-            if (event.target && event.target === this.component.el) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        }
-    }
-    get isComponentAccessible() {
-        return !this.component.disabled && !this.component.readonly;
-    }
-}
-
-const balInputDateCss = ".bal-input-date{display:block;width:100%;-ms-flex:1;flex:1}.bal-input-date input:not(:-moz-placeholder-shown){letter-spacing:.4px}.bal-input-date input:not(:-ms-input-placeholder){letter-spacing:.4px}.bal-input-date input:not(:placeholder-shown){letter-spacing:.4px}.bal-input-date__native{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}";
-
-const InputDate = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balKeyPress = createEvent(this, "balKeyPress");
-        this.balChange = createEvent(this, "balChange");
-        this.balInput = createEvent(this, "balInput");
-        this.balBlur = createEvent(this, "balBlur");
-        this.balFocus = createEvent(this, "balFocus");
-        this.inputId = `bal-i-date-${inputDateIds++}`;
-        this.inheritedAttributes = {};
-        this.maskAdapter = new MaskComponentAdapter(new DateMask());
-        this.focused = false;
-        this.isGrouped = false;
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true` the component gets a invalid style.
-         */
-        this.invalid = false;
-        /**
-         * If `true` the attribute required is added to the native input.
-         */
-        this.required = false;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the element can not mutated, meaning the user can not edit the control.
-         */
-        this.readonly = false;
-        /**
-         * If `true` the input gets a clickable cursor style
-         */
-        this.clickable = false;
-        /**
-         * Indicates whether the value of the control can be automatically completed by the browser.
-         */
-        this.autocomplete = 'off';
-        /**
-         * @internal
-         * If `true` the input will get some right padding.
-         */
-        this.hasIconRight = false;
-        /**
-         * The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD).
-         */
-        this.value = undefined;
-        this.inputValue = this.value;
-        this.initialValue = this.value || '';
-        /**
-         * If `true`, in Angular reactive forms the control will not be set invalid
-         */
-        this.autoInvalidOff = false;
-        /**
-         * If `true`, it returns the string `INVALID_VALUE` within the balChange event if the input provided is not valid.
-         */
-        this.allowInvalidValue = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    valueChanged(newValue, oldValue) {
-        this.maskAdapter.bindValueChanged(newValue, oldValue);
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.maskAdapter.bindComponent(this);
-        this.isGrouped = hasParent('bal-input-group', this.el);
-    }
-    componentDidLoad() {
-        this.maskAdapter.bindComponentDidLoad();
-    }
-    componentWillRender() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(config) {
-        this.maskAdapter.bindConfigChanged(config);
-    }
-    resetHandler(event) {
-        this.maskAdapter.bindFormReset(event);
-    }
-    listenOnClick(event) {
-        this.maskAdapter.bindGlobalClick(event);
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Sets focus on the native `input` in `bal-input`. Use this method instead of the global
-     * `input.focus()`.
-     */
-    async setFocus() {
-        inputSetFocus(this);
-    }
-    /**
-     * Sets blur on the native `input` in `bal-input`. Use this method instead of the global
-     * `input.blur()`.
-     * @internal
-     */
-    async setBlur() {
-        inputSetBlur(this);
-    }
-    /**
-     * Returns the native `<input>` element used under the hood.
-     */
-    getInputElement() {
-        return Promise.resolve(this.nativeInput);
-    }
-    /**
-     * @internal
-     */
-    async setAriaForm(ariaForm) {
-        this.ariaForm = Object.assign({}, ariaForm);
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('input-date');
-        const native = block.element('native');
-        return (h(Host, { key: '3c71adc69c5270029c588885037338aee6dfc85f', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '56c3f39f98b9dadb6b18f8bfea4c172e7bc0e607', class: {
-                'input': true,
-                'is-disabled': this.disabled || this.readonly,
-                'is-danger': this.invalid,
-                'is-clickable': this.clickable && !(this.disabled || this.readonly),
-                'bal-focusable': !this.disabled,
-                'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: 'dae67450389be6169c8257a0b1eaf877fb81e66b', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-__decorate([
-    Logger('bal-input-date'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], InputDate.prototype, "createLogger", null);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], InputDate.prototype, "configChanged", null);
-let inputDateIds = 0;
-InputDate.style = balInputDateCss;
-
-export { DateCalendar as bal_date_calendar, InputDate as bal_input_date };