@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627115746

package/components/p-Cs8DEpjh.js

@@ -0,0 +1,611 @@
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, d as Host } from './p-BuJ6BWIi.js';
+import { b as iconChevronRightSmall, l as iconChevronLeftSmall, m as iconSingleCheck } from './p-CGwHQeMX.js';
+import { D as DateTime, I as Info } from './p-bDicGJUN.js';
+import { O as OnListener } from './p-BcGAKMQ_.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$5 } from './p-CvvOe8xV.js';
+import { d as defineCustomElement$4 } from './p-5uA5ifmT.js';
+import { d as defineCustomElement$3 } from './p-Cut5OrRw.js';
+import { d as defineCustomElement$2 } from './p-BXjBChze.js';
+import { d as defineCustomElement$1 } from './p-BygLxZIM.js';
+
+const datePickerCss = ":host{display:block;position:relative;width:21rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .fontSize{font-size:16px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid--show-week-numbers{grid-template-columns:24px repeat(7, 40px)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item:first-child{width:24px}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset);background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}:host .grid .calendar-item.week-day .overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial;width:1.5rem}:host .button{display:flex;justify-content:flex-end;margin-top:1rem}:host .hidden{display:none}";
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dateChange = createEvent(this, "dateChange", 7);
+        this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+        this.dateSelect = createEvent(this, "dateSelect", 7);
+        /**
+         * Date format string.
+         * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         */
+        this.format = 'yyyy/LL/dd';
+        /**
+         * If true a date-range can be selected (from/to).
+         */
+        this.range = true;
+        /**
+         * Corner style
+         */
+        this.corners = 'rounded';
+        /**
+         * The earliest date that can be selected by the date picker.
+         * If not set there will be no restriction.
+         */
+        this.minDate = '';
+        /**
+         * The latest date that can be selected by the date picker.
+         * If not set there will be no restriction.
+         */
+        this.maxDate = '';
+        /**
+         * Text of date select button
+         */
+        this.i18nDone = 'Done';
+        /**
+         * The index of which day to start the week on, based on the Locale#weekdays array.
+         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+         */
+        this.weekStartIndex = 0;
+        /**
+         * Shows week numbers displayed on the left side of the date picker
+         *
+         * @since 3.0.0
+         */
+        this.showWeekNumbers = false;
+        /** @internal */
+        this.standaloneAppearance = true;
+        /** @internal */
+        this.today = DateTime.now().toISO();
+        this.selectedYear = 0;
+        this.tempYear = 0;
+        this.startYear = 0;
+        this.endYear = 0;
+        this.selectedMonth = 0;
+        this.tempMonth = 0;
+        this.dropdownButtonRef = makeRef();
+        this.yearContainerRef = makeRef();
+        this.firstMonthRef = makeRef();
+        this.focusedDay = 1;
+        this.isDayFocus = false;
+        this.monthChangedFromFocus = false;
+        this.DAYS_IN_WEEK = 7;
+        this.calendar = [];
+    }
+    watchFromPropHandler(newValue) {
+        if (!newValue) {
+            this.currFromDate = undefined;
+            return;
+        }
+        const date = this.parseDateString(newValue);
+        if (date) {
+            this.currFromDate = date;
+            this.updateSelectedYearMonth(date);
+        }
+    }
+    watchToPropHandler(newValue) {
+        if (!newValue) {
+            this.currToDate = undefined;
+            return;
+        }
+        const date = this.parseDateString(newValue);
+        if (date) {
+            this.currToDate = date;
+            this.updateSelectedYearMonth(date);
+        }
+    }
+    onLocaleChange() {
+        this.setTranslations();
+    }
+    /**
+     * Get the currently selected date-range.
+     */
+    async getCurrentDate() {
+        var _a, _b, _c, _d;
+        const _from = ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.isValid)
+            ? (_b = this.currFromDate) === null || _b === void 0 ? void 0 : _b.toFormat(this.format)
+            : undefined;
+        const _to = ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.isValid)
+            ? (_d = this.currToDate) === null || _d === void 0 ? void 0 : _d.toFormat(this.format)
+            : undefined;
+        if (this.range) {
+            return {
+                from: _from,
+                to: _to,
+            };
+        }
+        return {
+            from: _from,
+            to: undefined,
+        };
+    }
+    handleKeyUp(event) {
+        if (!this.isDayFocus) {
+            return;
+        }
+        let _focusedDay = this.focusedDay;
+        switch (event.key) {
+            case 'ArrowLeft':
+                _focusedDay--;
+                break;
+            case 'ArrowRight':
+                _focusedDay++;
+                break;
+            case 'ArrowUp':
+                _focusedDay = _focusedDay - 7;
+                break;
+            case 'ArrowDown':
+                _focusedDay = _focusedDay + 7;
+                break;
+            default:
+                return;
+        }
+        if (_focusedDay > this.getDaysInCurrentMonth()) {
+            _focusedDay = _focusedDay - this.getDaysInCurrentMonth();
+            this.changeToAdjacentMonth(1);
+            this.monthChangedFromFocus = true;
+        }
+        else if (_focusedDay < 1) {
+            this.changeToAdjacentMonth(-1);
+            _focusedDay = _focusedDay + this.getDaysInCurrentMonth();
+            this.monthChangedFromFocus = true;
+        }
+        this.focusedDay = _focusedDay;
+    }
+    getDaysInCurrentMonth() {
+        return (DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0);
+    }
+    getDateTimeNow() {
+        return DateTime.fromISO(this.today);
+    }
+    parseDateString(dateString) {
+        const date = DateTime.fromFormat(dateString, this.format);
+        if (!date.isValid) {
+            console.error(date.invalidExplanation);
+            return undefined;
+        }
+        return date;
+    }
+    updateSelectedYearMonth(date) {
+        this.selectedYear = date.year;
+        this.selectedMonth = date.month - 1;
+    }
+    onDayBlur() {
+        this.isDayFocus = false;
+    }
+    onDayFocus() {
+        this.isDayFocus = true;
+    }
+    componentWillLoad() {
+        var _a, _b, _c, _d;
+        this.setTranslations();
+        this.currFromDate = this.from
+            ? DateTime.fromFormat(this.from, this.format)
+            : undefined;
+        this.currToDate = this.to
+            ? DateTime.fromFormat(this.to, this.format)
+            : undefined;
+        const year = (_b = (_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : this.getDateTimeNow().year;
+        this.startYear = year - 5;
+        this.endYear = year + 5;
+        this.selectedMonth =
+            ((_d = (_c = this.currFromDate) === null || _c === void 0 ? void 0 : _c.month) !== null && _d !== void 0 ? _d : this.getDateTimeNow().month) - 1;
+        this.selectedYear = year;
+        this.tempMonth = this.selectedMonth;
+        this.tempYear = this.selectedYear;
+    }
+    componentWillRender() {
+        this.calculateCalendar();
+    }
+    componentDidRender() {
+        if (!this.monthChangedFromFocus && !this.isDayFocus) {
+            return;
+        }
+        const dayElem = this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);
+        dayElem.focus();
+    }
+    setTranslations() {
+        this.dayNames = this.rotateWeekDayNames(Info.weekdays('long', {
+            locale: this.locale,
+        }), this.weekStartIndex);
+        this.monthNames = Info.months('long', {
+            locale: this.locale,
+        });
+    }
+    /**
+     * Rotate the WeekdayNames array.
+     * Based on the position that should be the new 0-index.
+     */
+    rotateWeekDayNames(weekdays, index) {
+        const clone = [...weekdays];
+        if (index === 0) {
+            return clone;
+        }
+        index = -index;
+        const len = weekdays.length;
+        clone.push(...clone.splice(0, ((-index % len) + len) % len));
+        return clone;
+    }
+    async onDone() {
+        const date = await this.getCurrentDate();
+        this.dateSelect.emit(date);
+    }
+    calculateCalendar() {
+        const calendar = [];
+        const month = DateTime.utc(this.selectedYear, this.selectedMonth + 1);
+        const monthStart = month.startOf('month');
+        const monthEnd = month.endOf('month');
+        let startWeek = monthStart.weekNumber;
+        let endWeek = monthEnd.weekNumber;
+        let monthStartWeekDayIndex = monthStart.weekday - 1;
+        let monthEndWeekDayIndex = monthEnd.weekday - 1;
+        if (this.weekStartIndex !== 0) {
+            // Find the positions where to start/stop counting the day-numbers based on which day the week starts
+            const weekdays = Info.weekdays();
+            const monthStartWeekDayName = weekdays[monthStart.weekday];
+            monthStartWeekDayIndex = this.dayNames.findIndex((d) => d === monthStartWeekDayName);
+            const monthEndWeekDayName = weekdays[monthEnd.weekday];
+            monthEndWeekDayIndex = this.dayNames.findIndex((d) => d === monthEndWeekDayName);
+        }
+        let correctLastWeek = false;
+        if (endWeek === 1) {
+            endWeek = monthEnd.weeksInWeekYear + 1;
+            correctLastWeek = true;
+        }
+        let correctFirstWeek = false;
+        if (startWeek === monthStart.weeksInWeekYear) {
+            startWeek = 1;
+            endWeek++;
+            correctFirstWeek = true;
+        }
+        let currDayNumber = 1;
+        for (let weekIndex = startWeek; weekIndex <= endWeek && currDayNumber <= 31; weekIndex++) {
+            const daysArr = [];
+            for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {
+                // Display empty cells until the calender starts/has ended
+                if ((weekIndex === startWeek && j < monthStartWeekDayIndex) ||
+                    (weekIndex === endWeek && j > monthEndWeekDayIndex)) {
+                    daysArr.push(undefined);
+                }
+                else {
+                    daysArr.push(currDayNumber++);
+                }
+            }
+            if (correctFirstWeek || correctLastWeek) {
+                if (weekIndex === 1) {
+                    calendar.push({
+                        weekNumber: monthStart.weeksInWeekYear,
+                        dayNumbers: daysArr,
+                    });
+                }
+                else if (weekIndex === monthEnd.weekNumber) {
+                    calendar.push({
+                        weekNumber: 1,
+                        dayNumbers: daysArr,
+                    });
+                }
+                else {
+                    calendar.push({
+                        weekNumber: weekIndex - 1,
+                        dayNumbers: daysArr,
+                    });
+                }
+                continue;
+            }
+            calendar.push({
+                weekNumber: weekIndex,
+                dayNumbers: daysArr,
+            });
+        }
+        this.calendar = calendar;
+    }
+    selectTempYear(event, year) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        this.tempYear = year;
+    }
+    focusMonth() {
+        var _a;
+        (_a = this.firstMonthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    infiniteScrollYears() {
+        const yearContainer = this.yearContainerRef.current;
+        if (!yearContainer) {
+            return;
+        }
+        const scroll = yearContainer.scrollTop;
+        const maxScroll = yearContainer.scrollHeight;
+        const atTop = scroll === 0;
+        const atBottom = Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;
+        const limit = 200;
+        if (this.endYear - this.startYear > limit)
+            return;
+        if (atTop) {
+            const first = yearContainer.firstElementChild;
+            this.startYear -= 5;
+            yearContainer.scrollTo(0, first.offsetTop);
+            return;
+        }
+        if (atBottom) {
+            const last = yearContainer.lastElementChild;
+            this.endYear += 5;
+            yearContainer.scrollTo(0, last.offsetTop);
+        }
+    }
+    selectMonth(month) {
+        this.selectedMonth = month;
+        this.selectedYear = this.tempYear;
+        this.tempMonth = month;
+        const dropdown = this.hostElement.shadowRoot.querySelector('ix-dropdown');
+        if (dropdown) {
+            dropdown.show = false;
+        }
+    }
+    changeToAdjacentMonth(number) {
+        if (this.selectedMonth + number < 0) {
+            this.selectedYear--;
+            this.selectedMonth = 11;
+        }
+        else if (this.selectedMonth + number > 11) {
+            this.selectedYear++;
+            this.selectedMonth = 0;
+        }
+        else {
+            this.selectedMonth += number;
+        }
+    }
+    selectDay(selectedDay, target) {
+        if (target.classList.contains('disabled')) {
+            return;
+        }
+        const date = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, selectedDay));
+        if (!this.range || this.currFromDate === undefined) {
+            this.currFromDate = date;
+            this.onDateChange();
+            return;
+        }
+        // Reset the range selection
+        if (this.currToDate !== undefined) {
+            this.currFromDate = date;
+            this.currToDate = undefined;
+            this.onDateChange();
+            return;
+        }
+        // Swap from/to if the second date is before the current date
+        if (date < this.currFromDate) {
+            this.currToDate = this.currFromDate;
+            this.currFromDate = date;
+            this.onDateChange();
+            return;
+        }
+        // Set the range normally
+        this.currToDate = date;
+        this.onDateChange();
+    }
+    onDateChange() {
+        this.getCurrentDate().then((date) => {
+            this.dateChange.emit(date);
+            if (this.range) {
+                this.dateRangeChange.emit(date);
+            }
+        });
+    }
+    getDayClasses(day) {
+        var _a, _b, _c;
+        const todayObj = this.getDateTimeNow();
+        const selectedDayObj = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, day));
+        return {
+            'calendar-item': true,
+            'empty-day': day === undefined,
+            today: todayObj.hasSame(selectedDayObj, 'day'),
+            selected: ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, 'day')) ||
+                ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, 'day')),
+            range: this.currFromDate &&
+                selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&
+                this.currToDate !== undefined &&
+                selectedDayObj.startOf('day') < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf('day')),
+            disabled: !this.isWithinMinMaxDate(selectedDayObj),
+        };
+    }
+    isWithinMinMaxYear(year) {
+        const minDateYear = this.minDate
+            ? DateTime.fromFormat(this.minDate, this.format).year
+            : undefined;
+        const maxDateYear = this.maxDate
+            ? DateTime.fromFormat(this.maxDate, this.format).year
+            : undefined;
+        const isBefore = minDateYear ? year < minDateYear : false;
+        const isAfter = maxDateYear ? year > maxDateYear : false;
+        return !isBefore && !isAfter;
+    }
+    isWithinMinMaxMonth(month) {
+        const minDateObj = this.minDate
+            ? DateTime.fromFormat(this.minDate, this.format)
+            : undefined;
+        const maxDateObj = this.maxDate
+            ? DateTime.fromFormat(this.maxDate, this.format)
+            : undefined;
+        const minDateMonth = minDateObj === null || minDateObj === void 0 ? void 0 : minDateObj.month;
+        const maxDateMonth = maxDateObj === null || maxDateObj === void 0 ? void 0 : maxDateObj.month;
+        const isBefore = minDateMonth
+            ? this.tempYear === minDateObj.year && month < minDateMonth
+            : false;
+        const isAfter = maxDateMonth
+            ? this.tempYear === maxDateObj.year && month > maxDateMonth
+            : false;
+        return !isBefore && !isAfter;
+    }
+    isWithinMinMaxDate(date) {
+        const _minDate = this.minDate
+            ? DateTime.fromFormat(this.minDate, this.format)
+            : undefined;
+        const _maxDate = this.maxDate
+            ? DateTime.fromFormat(this.maxDate, this.format)
+            : undefined;
+        const isBefore = _minDate
+            ? date.startOf('day') < _minDate.startOf('day')
+            : false;
+        const isAfter = _maxDate
+            ? date.startOf('day') > _maxDate.startOf('day')
+            : false;
+        return !isBefore && !isAfter;
+    }
+    renderYears() {
+        const rows = [];
+        for (let year = this.startYear; year <= this.endYear; year++) {
+            rows.push(h("div", { key: year, class: {
+                    arrowYear: true,
+                    'month-dropdown-item': true,
+                    'disabled-item': !this.isWithinMinMaxYear(year),
+                }, onClick: (event) => this.selectTempYear(event, year), onKeyUp: (event) => {
+                    if (event.key === 'Enter') {
+                        this.tempYear = year;
+                        this.focusMonth();
+                    }
+                }, tabIndex: 0 }, h("ix-icon", { class: {
+                    hidden: this.tempYear !== year,
+                    arrowPosition: true,
+                }, name: iconChevronRightSmall, size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`)));
+        }
+        return rows;
+    }
+    render() {
+        return (h(Host, { key: 'e48ee389619f52726ce579c6486cab63d62b6fef' }, h("ix-date-time-card", { key: 'bd357a0e14678205965ea14d2e302eb828676d3c', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'bcab79091c34e84ce10de7be193717143d109810', class: "header", slot: "header" }, h("ix-icon-button", { key: 'd8038a98795ccfde0ddc7d50fc59ad36597e031e', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: iconChevronLeftSmall, variant: "primary", class: "arrows" }), h("div", { key: 'a3d445facefd7f74fffb663ed7aca2677d0673bb', class: "selector" }, h("ix-button", { key: 'd680ee000bf2c20b58871a192fb8b53f673db588', ghost: true, ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, h("span", { key: 'e84d83f994f6283c101dccf6278777504c2b8814', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'e0f414635d751b01162f7dd78caf266295f487ba', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '25dd57cad907373c60bb0c2cbb433e75e4a38e93', class: "wrapper" }, h("div", { key: 'a014091ce50a1c7a27d050edff6cbeb15dee34a4', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), h("div", { key: 'dc687dcea36e21d895945c4fdc18b993002d5d11', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
+                if (month === this.monthNames[0]) {
+                    this.firstMonthRef(ref);
+                }
+            }, class: {
+                arrowYear: true,
+                'month-dropdown-item': true,
+                selected: this.tempYear === this.selectedYear &&
+                    this.tempMonth === index,
+                'disabled-item': !this.isWithinMinMaxMonth(index),
+            }, onClick: () => this.selectMonth(index), onKeyUp: (event) => event.key === 'Enter' && this.selectMonth(index), tabIndex: 0 }, h("ix-icon", { class: {
+                hidden: this.tempYear !== this.selectedYear ||
+                    this.tempMonth !== index,
+                checkPosition: true,
+            }, name: iconSingleCheck, size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: '8e718bbd113146a599e4c15c3ee88a2a4b2bbe1b', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: iconChevronRightSmall, variant: "primary", class: "arrows" })), h("div", { key: '9424e9223eabaae8d851d8d7ab852a7d71a0724c', class: {
+                grid: true,
+                'grid--show-week-numbers': this.showWeekNumbers,
+            } }, this.showWeekNumbers && h("div", { key: '2ff1c7ee249a2a44b9d7c69be17c4d86a1405c20', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, h("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
+            return (h(Fragment, null, this.showWeekNumbers && (h("div", { class: "calendar-item week-number" }, week.weekNumber)), week.dayNumbers.map((day) => {
+                return day ? (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
+                        const target = e.currentTarget;
+                        this.selectDay(day, target);
+                    }, onKeyUp: (e) => {
+                        const target = e.currentTarget;
+                        if (e.key === 'Enter') {
+                            this.selectDay(day, target);
+                        }
+                    }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)) : (h("div", null));
+            })));
+        })), h("div", { key: '3a152e3f2c01b4643be45570424ef15996b09fc9', class: {
+                button: true,
+                hidden: !this.range || !this.standaloneAppearance,
+            } }, h("ix-button", { key: 'f485589cfc29f41eb354345bd015b36017e1ad86', onClick: () => this.onDone() }, this.i18nDone)))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "from": ["watchFromPropHandler"],
+        "to": ["watchToPropHandler"],
+        "locale": ["onLocaleChange"]
+    }; }
+    static get style() { return datePickerCss; }
+}, [1, "ix-date-picker", {
+        "format": [1],
+        "range": [4],
+        "corners": [1],
+        "from": [1],
+        "to": [1],
+        "minDate": [1, "min-date"],
+        "maxDate": [1, "max-date"],
+        "i18nDone": [1, "i18n-done"],
+        "weekStartIndex": [2, "week-start-index"],
+        "locale": [1],
+        "showWeekNumbers": [4, "show-week-numbers"],
+        "standaloneAppearance": [4, "standalone-appearance"],
+        "today": [1],
+        "currFromDate": [32],
+        "currToDate": [32],
+        "selectedYear": [32],
+        "tempYear": [32],
+        "startYear": [32],
+        "endYear": [32],
+        "selectedMonth": [32],
+        "tempMonth": [32],
+        "dayNames": [32],
+        "monthNames": [32],
+        "focusedDay": [32],
+        "getCurrentDate": [64]
+    }, undefined, {
+        "from": ["watchFromPropHandler"],
+        "to": ["watchToPropHandler"],
+        "locale": ["onLocaleChange"]
+    }]);
+__decorate([
+    OnListener('keydown')
+], DatePicker.prototype, "handleKeyUp", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-date-picker", "ix-button", "ix-date-time-card", "ix-dropdown", "ix-icon-button", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-date-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DatePicker);
+            }
+            break;
+        case "ix-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-date-time-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DatePicker as D, defineCustomElement as d };
+//# sourceMappingURL=p-Cs8DEpjh.js.map
+
+//# sourceMappingURL=p-Cs8DEpjh.js.map