@baloise/ds-core 0.0.5-nightly.e56f740

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

@@ -0,0 +1,1473 @@
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-4d3658f6.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { z as lodash_padstart, d as dateSeparator } from './index.esm-ec4cba26.js';
+import { l as lodash_isnil } from './index-82aff103.js';
+import { B as BalDate, i as i18nBalDate } from './date-db6afc26.js';
+import { L as Logger } from './log-dfd1c19f.js';
+import { b as waitAfterFramePaint, n as hasParent } from './helpers-c201154e.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { d as defaultConfig } from './config.default-79f94bf7.js';
+import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
+import { L as ListenToSwipe } from './swipe.decorator-9d904794.js';
+import { i as inheritAttributes } from './attributes-4fa7040f.js';
+import { c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { N as NUMBER_KEYS } from './keys.constant-0eb059e0.js';
+import './_commonjsHelpers-1c8beb5f.js';
+import './config.utils-6ac6c9bd.js';
+import './browser-a8073d92.js';
+import './icons.constant-a7885631.js';
+import './swipe.subject-f1d64e8d.js';
+import './device-8c6d2881.js';
+import './listener-04842ae9.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}-${lodash_padstart(`${month}`, 2, '0')}-${lodash_padstart(`${day}`, 2, '0')}`;
+}
+function isoDateOfToday() {
+    const today = new Date();
+    return `${today.getFullYear()}-${lodash_padstart(`${today.getMonth() + 1}`, 2, '0')}-${lodash_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 (lodash_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 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", { 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 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", { 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({}, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
+};
+
+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-test": "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-test": "previous-month" },
+                h("bal-icon", { name: "caret-left", color: "primary", size: "small" })),
+            h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-test": "next-month" },
+                h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
+};
+
+const balDateCalendarCss = ":host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}:host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}: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-color-text-primary);border:none;background:rgba(0,0,0,0);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-color-light-blue-1)}}.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled){color:var(--bal-color-light-blue-3);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-color-text-primary)}}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__nav button--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);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-color-text-primary);border:none;background:rgba(0,0,0,0);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-color-light-blue-1)}}.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-color-light-blue-2)}.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-color-light-blue-3);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-color-text-primary)}}.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-color-text-primary)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);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-color-text-primary);border:none;background:rgba(0,0,0,0);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-color-light-blue-1)}}.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled){color:var(--bal-color-light-blue-3);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-color-text-primary)}}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar-cell--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);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 BalDateCalendarStyle0 = balDateCalendarCss;
+
+const DateCalendar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.balChange = createEvent(this, "balChange", 7);
+        this.oldMin = '';
+        this.oldMax = '';
+        /**
+         * 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);
+        };
+        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;
+        this.value = undefined;
+        this.defaultDate = undefined;
+        this.allowedDates = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.minYearProp = undefined;
+        this.maxYearProp = undefined;
+    }
+    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, { class: Object.assign({}, block.class()) }, h(CalendarNav, { 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", { class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { 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, { name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { class: Object.assign({}, blockFoot.class()) }, h("slot", null))));
+    }
+    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 = BalDateCalendarStyle0;
+
+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);
+    }
+    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) {
+                    const valueChanged = this._options.component.value !== parsedValue;
+                    if (valueChanged) {
+                        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) {
+        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));
+            }
+        }
+    }
+    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) {
+        if (inputValue) {
+            const date = BalDate.fromAnyFormat(this.blocks.getRawValueWithoutMask(inputValue));
+            if (date.isValid) {
+                return date.toISODate();
+            }
+        }
+        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;
+            }
+        }
+    }
+}
+
+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 BalInputDateStyle0 = balInputDateCss;
+
+const InputDate = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.balKeyPress = createEvent(this, "balKeyPress", 7);
+        this.balChange = createEvent(this, "balChange", 7);
+        this.balInput = createEvent(this, "balInput", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.inputId = `bal-i-date-${inputDateIds++}`;
+        this.inheritedAttributes = {};
+        this.maskAdapter = new MaskComponentAdapter(new DateMask());
+        this.inputValue = this.value;
+        this.initialValue = this.value || '';
+        this.focused = false;
+        this.isGrouped = false;
+        this.ariaForm = defaultBalAriaForm;
+        this.name = this.inputId;
+        this.invalid = false;
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.placeholder = undefined;
+        this.clickable = false;
+        this.min = undefined;
+        this.max = undefined;
+        this.autocomplete = 'off';
+        this.hasIconRight = false;
+        this.value = undefined;
+        this.autoInvalidOff = 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']);
+    }
+    /**
+     * 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, { onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ 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": this.disabled ? 'true' : null, 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", { 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 = BalInputDateStyle0;
+
+export { DateCalendar as bal_date_calendar, InputDate as bal_input_date };