@uh-design-system/component-library 1.4.0 → 1.5.0

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-custom/ds-datepicker-custom.js

@@ -0,0 +1,1199 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+import { declareComponentDependencies, transformTagName, isArrowKey, isSelectionKey } from "../../../../utils/utils";
+import { cx } from "../../../../utils/cx";
+import { validityMessage, rangeUnderflow, rangeOverflow, badInput, valueMissing, } from "../../../../utils/controls/controlUtils";
+import { createDate, parseISODate, dateToString, formatDisplayDate, parseInputDate, isDateDisabled, isDateSelected, getCalendarDays, generateYearOptions, findFirstSelectableDateInMonth, findLastSelectableDateInMonth, getFirstSelectableDate, navigateMonth, getNextSelectableDate, getKeyboardNavigationStep, handleDateInputKeyDown, monthNames, monthNamesGenitive, weekdayNames, weekdayNamesShort, showToday, clearDate, previousMonth, nextMonth, openDatePicker, closeDatePicker, dateNotAvailable, monthLabel, yearLabel, selectMonth, selectYear, } from "../../../../utils/datepicker/datepickerUtils";
+const ANNOUNCER_RESET_TIMEOUT = 2000;
+const INPUT_DEBOUNCE_TIMEOUT = 500;
+export class DsDatepickerCustom {
+    el;
+    dsAriaDescribedby;
+    dsAriaControls;
+    dsId;
+    dsLabel = '';
+    dsValue;
+    dsName;
+    dsForm;
+    dsDisabled = false;
+    dsReadonly = false;
+    dsErrorText;
+    dsRequired = false;
+    dsOptional;
+    dsOptionalText;
+    dsAssistiveText;
+    dsHiddenAssistiveText;
+    dsPlaceholder;
+    dsMin;
+    dsMax;
+    dsDisabledDates;
+    dsYearRangeStart;
+    dsYearRangeEnd;
+    dsChange;
+    dsValidity;
+    dsSubmitInvalid;
+    dsBlur;
+    dsFocus;
+    isOpen = false;
+    currentMonth = new Date().getMonth();
+    currentYear = new Date().getFullYear();
+    selectedDate = '';
+    clickOutsideEnabled = false;
+    focusedDate = null;
+    hasFocus = false;
+    internalErrorText = '';
+    wasInvalidOnBlur = false;
+    announcerText = '';
+    transitionDirection = null;
+    transitionKey = 0;
+    debouncedInputValue = null;
+    inputValue = null;
+    originalValue = '';
+    justChanged = false;
+    pendingFocus = false;
+    cachedCalendarDays = [];
+    lastCalendarMonth = null;
+    lastCalendarYear = null;
+    cachedYearOptions = [];
+    pickerRef;
+    calendarButtonRef;
+    announceTimeout;
+    debounceTimeout;
+    get calendarButtonAriaLabel() {
+        let dateStr = this.selectedDate;
+        if (this.debouncedInputValue !== null && this.debouncedInputValue.trim() !== '') {
+            const parsed = parseInputDate(this.debouncedInputValue.trim());
+            if (parsed)
+                dateStr = parsed;
+        }
+        const date = dateStr ? parseISODate(dateStr) : null;
+        return this.isOpen ? closeDatePicker(date) : openDatePicker(date);
+    }
+    get dateConstraints() {
+        return {
+            min: this.dsMin,
+            max: this.dsMax,
+            disabledDates: this.dsDisabledDates,
+        };
+    }
+    textInputRef;
+    inputRef;
+    get validityText() {
+        return this.dsErrorText || this.internalErrorText || '';
+    }
+    get DsControlLabel() {
+        return transformTagName('ds-control-label', 'ds-datepicker-custom', this.el);
+    }
+    get DsIconTag() {
+        return transformTagName('ds-icon', 'ds-datepicker-custom', this.el);
+    }
+    get DsButtonTag() {
+        return transformTagName('ds-button', 'ds-datepicker-custom', this.el);
+    }
+    get DsSelectTag() {
+        return transformTagName('ds-select', 'ds-datepicker-custom', this.el);
+    }
+    get DsFeedbackTag() {
+        return transformTagName('ds-feedback', 'ds-datepicker-custom', this.el);
+    }
+    get DsInputValidityTag() {
+        return transformTagName('ds-input-validity', 'ds-datepicker-custom', this.el);
+    }
+    get DsTextInputTag() {
+        return transformTagName('ds-text-input', 'ds-datepicker-custom', this.el);
+    }
+    componentWillLoad() {
+        this.selectedDate = this.dsValue || '';
+        if (this.selectedDate) {
+            const date = parseISODate(this.selectedDate);
+            if (date) {
+                this.currentMonth = date.getMonth();
+                this.currentYear = date.getFullYear();
+            }
+        }
+        this.updateYearOptions();
+    }
+    updateYearOptions() {
+        this.cachedYearOptions = generateYearOptions(this.dsYearRangeStart, this.dsYearRangeEnd);
+    }
+    componentDidLoad() {
+        this.inputRef = this.textInputRef?.querySelector('input');
+        this.inputRef?.addEventListener('keydown', handleDateInputKeyDown);
+    }
+    componentDidRender() {
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            this.focusDayButton();
+        }
+    }
+    onFocusIn() {
+        this.hasFocus = true;
+    }
+    onFocusOut(e) {
+        const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
+        const lostFocus = !nextFocused || !this.el.contains(nextFocused);
+        if (lostFocus) {
+            if (this.pendingFocus)
+                return;
+            this.hasFocus = false;
+            if (this.justChanged) {
+                this.justChanged = false;
+                return;
+            }
+            const { isValid, flag, message } = this.validateInputValue();
+            this.wasInvalidOnBlur = !isValid;
+            if (isValid) {
+                this.applyValidInput();
+            }
+            this.internalErrorText = message;
+            this.dsValidity.emit({
+                flag,
+                message,
+            });
+        }
+    }
+    hasFocusObserver(newValue) {
+        if (newValue) {
+            this.dsFocus.emit();
+        }
+        else {
+            this.dsBlur.emit();
+        }
+    }
+    dsValueObserver(newValue) {
+        this.selectedDate = newValue || '';
+        if (!this.selectedDate)
+            return;
+        const date = parseISODate(this.selectedDate);
+        if (!date)
+            return;
+        this.currentMonth = date.getMonth();
+        this.currentYear = date.getFullYear();
+    }
+    dsYearRangeObserver() {
+        this.updateYearOptions();
+    }
+    handleDocumentKeyDown(event) {
+        if (!this.isOpen)
+            return;
+        if (event.key === 'Escape') {
+            this.selectedDate = this.originalValue;
+            this.inputValue = null;
+            this.closePicker(() => this.calendarButtonRef?.setFocus());
+            return;
+        }
+        if (event.key === 'Tab' && this.pickerRef) {
+            const focusableSelector = 'button:not([disabled]), [tabindex="0"], select, input, [tabindex]:not([tabindex="-1"])';
+            const focusableElements = Array.from(this.pickerRef.querySelectorAll(focusableSelector)).filter(el => {
+                return !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1';
+            });
+            if (focusableElements.length === 0)
+                return;
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (!event.shiftKey && (document.activeElement === lastElement || lastElement.contains(document.activeElement))) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+            else if (event.shiftKey && (document.activeElement === firstElement || firstElement.contains(document.activeElement))) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+    }
+    handleClickOutside(event) {
+        if (this.isOpen && this.clickOutsideEnabled && this.pickerRef) {
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.closePicker();
+            }
+        }
+    }
+    openPicker = () => {
+        if (this.dsDisabled || this.dsReadonly)
+            return;
+        if (this.inputValue !== null) {
+            const inputText = this.inputValue.trim();
+            if (inputText) {
+                const parsedDateString = parseInputDate(inputText);
+                if (parsedDateString && !isDateDisabled(parseISODate(parsedDateString), this.dateConstraints)) {
+                    this.selectedDate = parsedDateString;
+                    this.inputValue = null;
+                }
+            }
+        }
+        this.originalValue = this.selectedDate;
+        if (this.selectedDate) {
+            const selectedDateObj = parseISODate(this.selectedDate);
+            if (selectedDateObj) {
+                this.focusedDate = selectedDateObj;
+                this.currentMonth = selectedDateObj.getMonth();
+                this.currentYear = selectedDateObj.getFullYear();
+            }
+        }
+        else {
+            this.focusedDate = getFirstSelectableDate(this.dateConstraints);
+            this.currentMonth = this.focusedDate.getMonth();
+            this.currentYear = this.focusedDate.getFullYear();
+        }
+        this.isOpen = true;
+        this.clickOutsideEnabled = true;
+        this.pendingFocus = true;
+    };
+    togglePicker = () => {
+        if (this.isOpen) {
+            this.closePicker();
+        }
+        else {
+            this.openPicker();
+        }
+    };
+    handleCalendarButtonClick = (e) => {
+        e.stopPropagation();
+        this.togglePicker();
+    };
+    closePicker = (onClose) => {
+        this.isOpen = false;
+        this.clickOutsideEnabled = false;
+        this.focusedDate = null;
+        if (onClose) {
+            requestAnimationFrame(onClose);
+        }
+    };
+    focusDayButton = () => {
+        if (!this.pickerRef || !this.focusedDate) {
+            return;
+        }
+        const allDayButtons = this.pickerRef.querySelectorAll('[role="gridcell"] > button');
+        const focusedDay = this.focusedDate.getDate();
+        for (const button of Array.from(allDayButtons)) {
+            const buttonDay = parseInt(button.textContent?.trim() || '0');
+            const isOtherMonth = button.className.includes('other-month');
+            const isDisabled = button.disabled;
+            if (buttonDay === focusedDay && !isOtherMonth && !isDisabled) {
+                button.focus();
+                return;
+            }
+        }
+    };
+    selectDate = (date) => {
+        const dateStr = dateToString(date);
+        this.selectedDate = dateStr;
+        this.internalErrorText = '';
+        this.inputValue = null;
+        this.wasInvalidOnBlur = false;
+        this.justChanged = true;
+        this.dsChange.emit(dateStr);
+        this.dsValidity.emit({
+            flag: 'valid',
+            message: '',
+        });
+        this.closePicker(() => this.calendarButtonRef?.setFocus());
+    };
+    handleDayClick = (date) => {
+        if (isDateDisabled(date, this.dateConstraints)) {
+            return;
+        }
+        this.selectDate(date);
+    };
+    createDayClickHandler = (date) => {
+        return () => this.handleDayClick(date);
+    };
+    createDayKeyDownHandler = (date) => {
+        return (e) => this.handleDayKeyDown(e, date);
+    };
+    handleShowToday = () => {
+        const today = new Date();
+        const monthChanged = today.getMonth() !== this.currentMonth || today.getFullYear() !== this.currentYear;
+        if (monthChanged) {
+            const oldDate = createDate(this.currentYear, this.currentMonth, 1);
+            const direction = today > oldDate ? 'next' : 'prev';
+            this.setMonthWithTransition(today.getMonth(), today.getFullYear(), direction);
+        }
+        if (isDateDisabled(today, this.dateConstraints)) {
+            const firstSelectable = findFirstSelectableDateInMonth(this.currentYear, this.currentMonth, this.dateConstraints);
+            this.focusedDate = firstSelectable;
+        }
+        else {
+            this.focusedDate = today;
+        }
+        if (monthChanged) {
+            this.pendingFocus = true;
+        }
+        else {
+            requestAnimationFrame(() => this.focusDayButton());
+        }
+    };
+    handleClear = () => {
+        this.selectedDate = '';
+        this.inputValue = null;
+        this.internalErrorText = '';
+        this.wasInvalidOnBlur = false;
+        this.justChanged = true;
+        this.dsChange.emit('');
+        this.dsValidity.emit({
+            flag: 'valid',
+            message: '',
+        });
+        this.closePicker(() => this.inputRef?.focus());
+    };
+    handleDayKeyDown = (event, date) => {
+        const key = event.key;
+        if (key === 'Tab') {
+            return;
+        }
+        if (isArrowKey(key)) {
+            event.preventDefault();
+            const step = getKeyboardNavigationStep(key);
+            const newDate = getNextSelectableDate(date, step, this.dateConstraints);
+            if (newDate) {
+                this.focusedDate = newDate;
+                this.inputValue = formatDisplayDate(dateToString(newDate));
+                if (newDate.getMonth() !== this.currentMonth || newDate.getFullYear() !== this.currentYear) {
+                    const oldDate = createDate(this.currentYear, this.currentMonth, 1);
+                    const direction = newDate > oldDate ? 'next' : 'prev';
+                    this.setMonthWithTransition(newDate.getMonth(), newDate.getFullYear(), direction);
+                    this.announceMonthYear();
+                    this.pendingFocus = true;
+                }
+                else {
+                    requestAnimationFrame(() => this.focusDayButton());
+                }
+            }
+        }
+        if (isSelectionKey(key)) {
+            event.preventDefault();
+            if (!isDateDisabled(date, this.dateConstraints)) {
+                this.selectDate(date);
+            }
+        }
+    };
+    applyValidInput() {
+        if (this.inputValue === null)
+            return;
+        const inputValue = this.inputValue.trim();
+        this.inputValue = null;
+        if (!inputValue) {
+            if (this.selectedDate) {
+                this.selectedDate = '';
+                this.dsChange.emit('');
+            }
+            return;
+        }
+        const parsedDateString = parseInputDate(inputValue);
+        if (!parsedDateString || parsedDateString === this.selectedDate)
+            return;
+        this.selectedDate = parsedDateString;
+        const date = parseISODate(parsedDateString);
+        if (date) {
+            this.currentMonth = date.getMonth();
+            this.currentYear = date.getFullYear();
+        }
+        this.dsChange.emit(parsedDateString);
+    }
+    validateInputValue = () => {
+        const inputValue = (this.inputValue !== null ? this.inputValue : formatDisplayDate(this.selectedDate)).trim();
+        if (!inputValue && this.dsRequired) {
+            return { isValid: false, flag: 'valueMissing', message: valueMissing() };
+        }
+        if (!inputValue) {
+            return { isValid: true, flag: 'valid', message: '' };
+        }
+        const parsedDateString = parseInputDate(inputValue);
+        if (!parsedDateString) {
+            return { isValid: false, flag: 'badInput', message: badInput() };
+        }
+        const date = parseISODate(parsedDateString);
+        if (!date) {
+            return { isValid: false, flag: 'badInput', message: badInput() };
+        }
+        if (this.dsMin) {
+            const minDate = parseISODate(this.dsMin);
+            if (minDate && date < minDate) {
+                return { isValid: false, flag: 'rangeUnderflow', message: rangeUnderflow() };
+            }
+        }
+        if (this.dsMax) {
+            const maxDate = parseISODate(this.dsMax);
+            if (maxDate && date > maxDate) {
+                return { isValid: false, flag: 'rangeOverflow', message: rangeOverflow() };
+            }
+        }
+        if (this.dsDisabledDates?.includes(parsedDateString)) {
+            return { isValid: false, flag: 'customError', message: dateNotAvailable() };
+        }
+        return { isValid: true, flag: 'valid', message: '' };
+    };
+    handleInputChange = (event) => {
+        const newInputValue = event.detail.value;
+        this.inputValue = newInputValue;
+        if (this.debounceTimeout) {
+            clearTimeout(this.debounceTimeout);
+        }
+        this.debounceTimeout = setTimeout(() => {
+            this.debouncedInputValue = newInputValue !== null ? newInputValue : '';
+        }, INPUT_DEBOUNCE_TIMEOUT);
+        if (!newInputValue.trim()) {
+            if (!this.dsRequired) {
+                if (this.selectedDate || this.internalErrorText) {
+                    this.selectedDate = '';
+                    this.internalErrorText = '';
+                    this.wasInvalidOnBlur = false;
+                    this.dsChange.emit('');
+                    this.dsValidity.emit({
+                        flag: 'valid',
+                        message: '',
+                    });
+                }
+            }
+            return;
+        }
+        if (this.wasInvalidOnBlur) {
+            const { isValid, flag, message } = this.validateInputValue();
+            if (isValid) {
+                const parsedDateString = parseInputDate(newInputValue);
+                if (parsedDateString) {
+                    this.selectedDate = parsedDateString;
+                    const date = parseISODate(parsedDateString);
+                    if (date) {
+                        this.currentMonth = date.getMonth();
+                        this.currentYear = date.getFullYear();
+                    }
+                    this.internalErrorText = '';
+                    this.wasInvalidOnBlur = false;
+                    this.dsChange.emit(parsedDateString);
+                }
+            }
+            this.dsValidity.emit({
+                flag,
+                message,
+            });
+        }
+    };
+    setMonthWithTransition = (month, year, direction) => {
+        this.transitionDirection = direction;
+        this.transitionKey++;
+        this.currentMonth = month;
+        this.currentYear = year;
+    };
+    handleChangeMonth = (direction) => {
+        const { month, year } = navigateMonth(this.currentMonth, this.currentYear, direction);
+        this.setMonthWithTransition(month, year, direction);
+        let focusDate = null;
+        if (direction === 'prev') {
+            focusDate = findLastSelectableDateInMonth(year, month, this.dateConstraints) ?? createDate(year, month + 1, 0);
+        }
+        else {
+            focusDate = findFirstSelectableDateInMonth(year, month, this.dateConstraints) ?? createDate(year, month, 1);
+        }
+        this.focusedDate = focusDate;
+        this.announceMonthYear();
+    };
+    handleMonthChange = (event) => {
+        event.stopPropagation();
+        const value = parseInt(event.detail, 10);
+        if (!isNaN(value) && value >= 0 && value <= 11) {
+            const direction = value > this.currentMonth ? 'next' : 'prev';
+            this.setMonthWithTransition(value, this.currentYear, direction);
+            const firstSelectable = findFirstSelectableDateInMonth(this.currentYear, value, this.dateConstraints);
+            this.focusedDate = firstSelectable ?? createDate(this.currentYear, value, 1);
+            this.announceMonthYear();
+        }
+    };
+    handleYearChange = (event) => {
+        event.stopPropagation();
+        const value = parseInt(event.detail, 10);
+        if (!isNaN(value)) {
+            const direction = value > this.currentYear ? 'next' : 'prev';
+            this.setMonthWithTransition(this.currentMonth, value, direction);
+            const firstSelectable = findFirstSelectableDateInMonth(value, this.currentMonth, this.dateConstraints);
+            this.focusedDate = firstSelectable ?? createDate(value, this.currentMonth, 1);
+            this.announceMonthYear();
+        }
+    };
+    announceMonthYear = () => {
+        const months = monthNames();
+        this.announcerText = `${months[this.currentMonth]} ${this.currentYear}`;
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+        this.announceTimeout = setTimeout(() => {
+            this.announcerText = '';
+            this.announceTimeout = undefined;
+        }, ANNOUNCER_RESET_TIMEOUT);
+    };
+    getCalendarDaysWithCache() {
+        const year = this.currentYear;
+        const month = this.currentMonth;
+        if (this.lastCalendarMonth === month && this.lastCalendarYear === year && this.cachedCalendarDays.length > 0) {
+            return this.cachedCalendarDays;
+        }
+        this.lastCalendarMonth = month;
+        this.lastCalendarYear = year;
+        this.cachedCalendarDays = getCalendarDays(year, month);
+        return this.cachedCalendarDays;
+    }
+    handleIconKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.togglePicker();
+        }
+    };
+    getValidityMessage() {
+        if (!this.inputRef)
+            return '';
+        if (this.selectedDate) {
+            const date = parseISODate(this.selectedDate);
+            if (!date)
+                return '';
+            if (this.dsMin) {
+                const minDate = parseISODate(this.dsMin);
+                if (minDate && date < minDate) {
+                    return rangeUnderflow();
+                }
+            }
+            if (this.dsMax) {
+                const maxDate = parseISODate(this.dsMax);
+                if (maxDate && date > maxDate) {
+                    return rangeOverflow();
+                }
+            }
+            if (this.dsDisabledDates?.includes(this.selectedDate)) {
+                return dateNotAvailable();
+            }
+        }
+        const validity = this.inputRef.validity;
+        for (const key in validity) {
+            if (key !== 'valid' && validity[key]) {
+                return validityMessage(key);
+            }
+        }
+        return '';
+    }
+    handleValidityEvent(emitter) {
+        return (e) => {
+            e.stopPropagation();
+            const message = this.getValidityMessage();
+            emitter.emit({
+                flag: 'customError',
+                message,
+            });
+        };
+    }
+    render() {
+        const customDatepickerClass = cx('ds-datepicker-custom');
+        const months = monthNames();
+        const weekdays = weekdayNamesShort();
+        const calendarDays = this.getCalendarDaysWithCache();
+        const yearOptions = this.cachedYearOptions;
+        const assistiveTextId = this.dsAssistiveText ? `${this.dsId}-assistive` : undefined;
+        const hiddenAssistiveTextId = this.dsHiddenAssistiveText ? `${this.dsId}-hidden-assistive` : undefined;
+        const validityId = this.validityText ? `${this.dsId}-validity` : undefined;
+        const ariaDescribedbyValue = this.dsAriaDescribedby || undefined;
+        return (h("div", { key: '69cadc9c7d50b820fb3c34a4703e08e0bd5f7c45' }, h(this.DsControlLabel, { key: 'cf476515a6c9a69c37a19bb353284e2afa5c0ca7', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: '1ff27a22333bedf503dd841c199ebe406162e8a4', name: "label" }), h("slot", { key: '28f1cf72a81c381596904d5ef0426641ecd5e1be', name: "assistiveText" })), h("div", { key: '8beaa3459ef8b3167029575ac40f275348e940a4', class: customDatepickerClass }, h(this.DsTextInputTag, { key: '06d05b008d0c37b755bfc5f68a103da351a7a576', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue !== null ? this.inputValue : formatDisplayDate(this.selectedDate), dsPlaceholder: this.dsPlaceholder, dsInvalid: !!this.validityText, dsFullWidth: true, dsAriaDescribedby: [ariaDescribedbyValue, assistiveTextId, hiddenAssistiveTextId, validityId].filter(Boolean).join(' ') || undefined, onDsInput: this.handleInputChange, onDsChange: (e) => e.stopPropagation(), onDsValidity: this.handleValidityEvent(this.dsValidity), onDsSubmitInvalid: this.handleValidityEvent(this.dsSubmitInvalid) }, h(this.DsButtonTag, { key: 'aa5a74227bcd893bd7e9daaeac8240faf70686a6', ref: el => (this.calendarButtonRef = el), slot: "suffix", class: `${customDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.handleCalendarButtonClick, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: this.calendarButtonAriaLabel, dsInInput: true, tabindex: this.dsDisabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false' }, h(this.DsIconTag, { key: 'b9368dc0bc38ae1423eced9b582d6623a1e38df6', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: 'b4bdda1fe20b897af082f9e437afd04b8532ec01', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: '49c816903bfc42bd59de291186db2f5cd239b312', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: '90ea515e369feae5b3c0da23f6bdab7e711e23c9', class: `${customDatepickerClass}__header` }, h("div", { key: 'f8b3c89a37b4a95f2d407fff61e98c9931c507a5', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '640c620120693aaacbbe6e5ce0363279a91deef8', dsId: `${this.dsId}-month`, dsValue: this.currentMonth.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: monthLabel(), dsAriaLabel: `${selectMonth()}, ${months[this.currentMonth]}`, onDsChange: this.handleMonthChange }, months.map((monthName, index) => (h("option", { slot: "native", value: index.toString() }, monthName)))), h(this.DsSelectTag, { key: '0b28bbd3eb40420510b5923012b45e0bbf13180a', dsId: `${this.dsId}-year`, dsValue: this.currentYear.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: yearLabel(), dsAriaLabel: `${selectYear()}, ${this.currentYear}`, onDsChange: this.handleYearChange }, yearOptions.map(year => (h("option", { slot: "native", value: year.toString() }, year))))), h("div", { key: '37208635fca239b0cad7479c564f12e8691201d4', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: '7fc174620743bf23a22f2108581351133571f51a', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: 'c1cabd3eeb83cc8f552e465359e07f91e718c738', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: '21a1f12a0e24ea62390abb6b2c11546c6fe08750', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: 'c196c2a7be96068e0ec47ae79452bff321aceac2', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), h("div", { class: classNames(`${customDatepickerClass}__calendar`, {
+                [`${customDatepickerClass}__calendar--transitioning`]: this.transitionDirection !== null,
+                [`${customDatepickerClass}__calendar--prev`]: this.transitionDirection === 'prev',
+                [`${customDatepickerClass}__calendar--next`]: this.transitionDirection === 'next',
+            }), key: this.transitionKey, role: "grid", "aria-label": `${months[this.currentMonth]} ${this.currentYear}`, onAnimationEnd: () => (this.transitionDirection = null) }, h("div", { key: '9d3a3d46475f6c55a8ff078e41ca261c97a86073', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (h("div", { class: `${customDatepickerClass}__weekday`, role: "columnheader" }, weekday)))), Array.from({ length: Math.ceil(calendarDays.length / 7) }, (_, rowIndex) => {
+            const rowDays = calendarDays.slice(rowIndex * 7, (rowIndex + 1) * 7);
+            return (h("div", { role: "row", class: `${customDatepickerClass}__day-row` }, rowDays.map(({ day, isCurrentMonth, isToday, date }) => {
+                const isDisabled = isDateDisabled(date, this.dateConstraints);
+                const isSelected = isDateSelected(date, this.selectedDate);
+                const isFocused = this.focusedDate &&
+                    date.getDate() === this.focusedDate.getDate() &&
+                    date.getMonth() === this.focusedDate.getMonth() &&
+                    date.getFullYear() === this.focusedDate.getFullYear();
+                const genitiveMonths = monthNamesGenitive();
+                const fullWeekdays = weekdayNames();
+                const dayOfWeekIndex = (date.getDay() + 6) % 7;
+                const ariaLabel = `${date.getDate()} ${genitiveMonths[date.getMonth()]} ${fullWeekdays[dayOfWeekIndex]} ${date.getFullYear()}`;
+                return (h("div", { role: "gridcell", "aria-selected": isSelected ? 'true' : 'false' }, h("button", { type: "button", disabled: isDisabled, tabIndex: isFocused && isCurrentMonth && !isDisabled ? 0 : -1, "aria-current": isToday ? 'date' : undefined, "aria-label": ariaLabel, onClick: this.createDayClickHandler(date), onKeyDown: this.createDayKeyDownHandler(date), class: classNames(`${customDatepickerClass}__day`, {
+                        [`${customDatepickerClass}__day--other-month`]: !isCurrentMonth,
+                        [`${customDatepickerClass}__day--today`]: isToday,
+                        [`${customDatepickerClass}__day--selected`]: isSelected,
+                        [`${customDatepickerClass}__day--disabled`]: isDisabled,
+                    }) }, day)));
+            })));
+        })), h("div", { key: '2bf24f1c2a157e09e090dac16bc053a47e3b32c8', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: '653f532fedf1dcb4a3dbfd692f028fe68ed16248', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: 'fb8d2b9e1efcd3a82a518ef9cb796d589cf9465d', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: '427f5d4c0ae24e8c35a68d72478e5cfb4e419da6', id: validityId, dsText: this.validityText, dsType: "error" })));
+    }
+    static get is() { return "ds-datepicker-custom"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-datepicker-custom.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-datepicker-custom.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsAriaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-describedby` attribute of the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-describedby"
+            },
+            "dsAriaControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-controls` attribute of the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-controls"
+            },
+            "dsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique `id` attribute of the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-id"
+            },
+            "dsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label to display above the datepicker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-label",
+                "defaultValue": "''"
+            },
+            "dsValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value in ISO 8601 format (YYYY-MM-DD). Example: \"2024-06-15\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-value"
+            },
+            "dsName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-name"
+            },
+            "dsForm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `form` attribute of the `input` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-form"
+            },
+            "dsDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, disables the datepicker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-disabled",
+                "defaultValue": "false"
+            },
+            "dsReadonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-readonly",
+                "defaultValue": "false"
+            },
+            "dsErrorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text to display below the datepicker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-error-text"
+            },
+            "dsRequired": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the datepicker is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-required",
+                "defaultValue": "false"
+            },
+            "dsOptional": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays indicator that the datepicker is optional alongside label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-optional"
+            },
+            "dsOptionalText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown alongside label, if the datepicker is set as optional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-optional-text"
+            },
+            "dsAssistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for additional information shown below label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-assistive-text"
+            },
+            "dsHiddenAssistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden text for screen readers only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-hidden-assistive-text"
+            },
+            "dsPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when no date is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-placeholder"
+            },
+            "dsMin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable date in ISO 8601 format (YYYY-MM-DD). Example: \"2024-01-01\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-min"
+            },
+            "dsMax": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable date in ISO 8601 format (YYYY-MM-DD). Example: \"2024-12-31\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-max"
+            },
+            "dsDisabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of specific dates to disable in ISO 8601 format (YYYY-MM-DD)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dsYearRangeStart": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum year shown in the year selector dropdown. Example: 1900"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-year-range-start"
+            },
+            "dsYearRangeEnd": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum year shown in the year selector dropdown. Example: 2100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-year-range-end"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "currentMonth": {},
+            "currentYear": {},
+            "selectedDate": {},
+            "clickOutsideEnabled": {},
+            "focusedDate": {},
+            "hasFocus": {},
+            "internalErrorText": {},
+            "wasInvalidOnBlur": {},
+            "announcerText": {},
+            "transitionDirection": {},
+            "transitionKey": {},
+            "debouncedInputValue": {},
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the date value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsValidity",
+                "name": "dsValidity",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsValidity` event is emitted when the datepicker's validity state changes."
+                },
+                "complexType": {
+                    "original": "DsValidityEvent",
+                    "resolved": "{ flag: validityFlag; message?: string; }",
+                    "references": {
+                        "DsValidityEvent": {
+                            "location": "import",
+                            "path": "../../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsSubmitInvalid",
+                "name": "dsSubmitInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsSubmitInvalid` event is emitted when the datepicker is invalid when attempting to submit a form."
+                },
+                "complexType": {
+                    "original": "DsSubmitInvalidEvent",
+                    "resolved": "{ flag: validityFlag; message: string; }",
+                    "references": {
+                        "DsSubmitInvalidEvent": {
+                            "location": "import",
+                            "path": "../../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the datepicker loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the datepicker gains focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hasFocus",
+                "methodName": "hasFocusObserver"
+            }, {
+                "propName": "dsValue",
+                "methodName": "dsValueObserver"
+            }, {
+                "propName": "dsYearRangeStart",
+                "methodName": "dsYearRangeObserver"
+            }, {
+                "propName": "dsYearRangeEnd",
+                "methodName": "dsYearRangeObserver"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleDocumentKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+declareComponentDependencies([
+    h("ds-icon", { dsName: "" }),
+    h("ds-control-label", null),
+    h("ds-input-validity", null),
+    h("ds-button", null),
+    h("ds-select", null),
+    h("ds-option", { dsValue: "" }),
+    h("ds-text-input", null),
+    h("ds-feedback", null),
+]);