@ama-pt/agora-design-system 0.1.16 → 0.2.0

package/dist/components/ui/organisms/input-date/date-picker-dialog.class.js

@@ -1,577 +0,0 @@
-class DatePickerDialog {
-    constructor(cdp, langs, dateEventList) {
-        this.days = [];
-        const validDates = dateEventList === null || dateEventList === void 0 ? void 0 : dateEventList.filter((obj) => {
-            return DatePickerDialog.isValidISODate(obj.date);
-        });
-        this.dayLabels = langs === null || langs === void 0 ? void 0 : langs.days;
-        this.monthLabels = langs === null || langs === void 0 ? void 0 : langs.months;
-        this.eventDates = Array.isArray(validDates) ? validDates : [];
-        this.textBoxNode = cdp.querySelector('input[type="date"]');
-        this.buttonNode = cdp.querySelector('.group button');
-        this.dialogNode = cdp.querySelector('[role="dialog"]');
-        this.monthYearNode = this.dialogNode.querySelector('.month-year');
-        this.prevYearNode = this.dialogNode.querySelector('.prev-year');
-        this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
-        this.nextMonthNode = this.dialogNode.querySelector('.next-month');
-        this.nextYearNode = this.dialogNode.querySelector('.next-year');
-        this.okButtonNode = this.dialogNode.querySelector('button[value="ok"]');
-        this.cancelButtonNode = this.dialogNode.querySelector('button[value="cancel"]');
-        this.okTodayButtonNode = this.dialogNode.querySelector('button[value="todayButton"]');
-        this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
-        this.tbodyNodeTD = this.dialogNode.querySelector('table.dates tbody td');
-        this.lastRowNode = undefined;
-        this.days = [];
-        this.focusDay = new Date();
-        this.selectedDay = new Date(0, 0, 1);
-        this.isMouseDownOnBackground = false;
-        this.outsideClickFn = this.handleBackgroundMouseUp.bind(this);
-        this.textBoxNode.addEventListener('click', function (event) {
-            event.preventDefault();
-        });
-    }
-    init() {
-        var _a, _b;
-        (_a = this.textBoxNode) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.setDateForButtonLabel.bind(this));
-        this.buttonNode.addEventListener('keydown', this.handleButtonKeydown.bind(this));
-        this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
-        this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
-        this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
-        this.okTodayButtonNode.addEventListener('click', this.handleOkTodayButton.bind(this));
-        this.okTodayButtonNode.addEventListener('click', this.handleOkTodayButton.bind(this));
-        this.cancelButtonNode.addEventListener('click', this.handleCancelButton.bind(this));
-        this.prevMonthNode.addEventListener('click', this.handlePreviousMonthButton.bind(this));
-        this.nextMonthNode.addEventListener('click', this.handleNextMonthButton.bind(this));
-        this.prevYearNode.addEventListener('click', this.handlePreviousYearButton.bind(this));
-        this.prevYearNode.addEventListener('keydown', this.handlePreviousYearButton.bind(this));
-        this.nextYearNode.addEventListener('click', this.handleNextYearButton.bind(this));
-        document.addEventListener('click', this.outsideClickFn, true);
-        this.dialogNode.addEventListener('keydown', this.handleEscEvent.bind(this));
-        // Create Grid of Dates
-        this.tbodyNode.innerHTML = '';
-        for (let i = 0; i < 6; i += 1) {
-            const row = this.tbodyNode.insertRow(i);
-            this.lastRowNode = row;
-            for (let j = 0; j < 7; j += 1) {
-                const cell = document.createElement('td');
-                cell.tabIndex = -1;
-                cell.addEventListener('click', this.handleDayClick.bind(this));
-                cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
-                cell.textContent = '-1';
-                row.appendChild(cell);
-                (_b = this.days) === null || _b === void 0 ? void 0 : _b.push(cell);
-            }
-        }
-        this.updateGrid();
-        this.close(false);
-        this.setDateForButtonLabel();
-    }
-    dispose() {
-        const utilRemoveListeners = (box) => {
-            if (box) {
-                box.replaceWith(box.cloneNode(true));
-            }
-        };
-        utilRemoveListeners(this.textBoxNode);
-        utilRemoveListeners(this.buttonNode);
-        utilRemoveListeners(this.okButtonNode);
-        utilRemoveListeners(this.okTodayButtonNode);
-        utilRemoveListeners(this.cancelButtonNode);
-        utilRemoveListeners(this.prevMonthNode);
-        utilRemoveListeners(this.nextMonthNode);
-        utilRemoveListeners(this.prevYearNode);
-        utilRemoveListeners(this.nextYearNode);
-        utilRemoveListeners(this.dialogNode);
-        document.removeEventListener('click', this.outsideClickFn, true);
-        this.days.forEach((d) => {
-            utilRemoveListeners(d);
-        });
-    }
-    static isValidISODate(dateString) {
-        // Regular expression pattern to match the ISO 8601 format
-        const isoDatePattern = /^\d{4}-\d{2}-\d{2}$/;
-        // Check if the input string matches the ISO 8601 pattern
-        if (!isoDatePattern.test(dateString)) {
-            return false;
-        }
-        const dateObj = new Date(dateString);
-        if (Number.isNaN(dateObj.getTime()) || dateString !== dateObj.toISOString().slice(0, 10)) {
-            return false;
-        }
-        return true;
-    }
-    moveFocusToDay(day) {
-        const d = this.focusDay;
-        this.focusDay = day;
-        if (d.getMonth() !== this.focusDay.getMonth() || d.getFullYear() !== this.focusDay.getFullYear()) {
-            this.updateGrid();
-        }
-        this.setFocusDay(true);
-    }
-    setFocusDay(flag) {
-        let localFlag = flag;
-        if (typeof flag !== 'boolean') {
-            localFlag = true;
-        }
-        this.days.forEach((_item, index) => {
-            const dayNode = this.days[index];
-            const day = DatePickerDialog.getDayFromDataDateAttribute(dayNode);
-            dayNode.tabIndex = -1;
-            if (DatePickerDialog.isSameDay(day, this.focusDay)) {
-                dayNode.tabIndex = 0;
-                if (localFlag) {
-                    dayNode.focus();
-                }
-            }
-        });
-    }
-    handleButtonKeydown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            this.open();
-            this.setFocusDay(true);
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    handleButtonClick(event) {
-        if (this.isOpen()) {
-            this.close(false);
-        }
-        else {
-            this.open();
-            this.setFocusDay(true);
-        }
-        event.stopPropagation();
-        event.preventDefault();
-    }
-    setDateForButtonLabel() {
-        var _a;
-        const parts = (_a = this.textBoxNode) === null || _a === void 0 ? void 0 : _a.value.split('/');
-        if ((parts === null || parts === void 0 ? void 0 : parts.length) === 3 &&
-            Number.isInteger(parseInt(parts[0], 10)) &&
-            Number.isInteger(parseInt(parts[1], 10)) &&
-            Number.isInteger(parseInt(parts[2], 10))) {
-            const day = new Date(parseInt(parts[2], 10), parseInt(parts[0], 10) - 1, parseInt(parts[1], 10));
-            let label = this.buttonLabelChange;
-            label += `, ${this.dayLabels ? this.dayLabels[day.getDay()] : []}`;
-            label += ` ${this.monthLabels ? [day.getMonth()] : []}`;
-            label += ` ${day.getDate()}`;
-            label += `, ${day.getFullYear()}`;
-            this.buttonNode.setAttribute('aria-label', label);
-        }
-    }
-    handleEventKeyboardTop(event, actions) {
-        let flag = false;
-        switch (event.type) {
-            case 'keydown':
-                if (event.key === 'Tab' && actions === 'moveToPreviousYear') {
-                    if (!event.shiftKey) {
-                        this.prevMonthNode.focus();
-                    }
-                    else {
-                        this.okButtonNode.focus();
-                    }
-                    flag = true;
-                }
-                else if (event.key === 'Enter' && actions === 'moveToPreviousYear') {
-                    this.moveToPreviousYear();
-                    this.setFocusDay(false);
-                    flag = true;
-                }
-                break;
-            case 'click':
-                if (actions === 'moveToPreviousYear') {
-                    this.moveToPreviousYear();
-                }
-                this.setFocusDay(false);
-                flag = true;
-                break;
-            default:
-                break;
-        }
-        if (flag) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    handleEventKeyboardBottom(event, actions) {
-        let flag = false;
-        switch (event.type) {
-            case 'keydown':
-                if (event.key === 'Tab' && actions === 'handleOkButton') {
-                    if (!event.shiftKey) {
-                        this.prevYearNode.focus();
-                    }
-                    else {
-                        this.cancelButtonNode.focus();
-                    }
-                    flag = true;
-                }
-                else if (event.key === 'Esc' || event.key === 'Escape') {
-                    this.close(true);
-                    flag = true;
-                }
-                else if (event.key === 'Enter') {
-                    this.handleKeyClickOrEnter(actions);
-                    this.setFocusDay(false);
-                    flag = true;
-                }
-                break;
-            case 'click':
-                this.handleKeyClickOrEnter(actions);
-                this.setFocusDay(false);
-                flag = true;
-                break;
-            default:
-                break;
-        }
-        if (flag) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    // On click or on Enter Click
-    handleKeyClickOrEnter(actions) {
-        switch (actions) {
-            case 'moveToPreviousYear':
-                this.moveToPreviousYear();
-                break;
-            case 'handleOkTodayButton':
-                this.focusDay = new Date();
-                this.selectedDay = new Date(0, 0, 1);
-                this.setTextBoxDate('');
-                this.close(true);
-                break;
-            case 'handleOkButton':
-                this.setTextBoxDate('');
-                this.close(true);
-                break;
-            case 'handleCancelButton':
-                this.close(true);
-                break;
-            default:
-                break;
-        }
-    }
-    handleOkButton(event) {
-        this.handleEventKeyboardBottom(event, 'handleOkButton');
-    }
-    handleCancelButton(event) {
-        this.handleEventKeyboardBottom(event, 'handleCancelButton');
-    }
-    handleOkTodayButton(event) {
-        this.handleEventKeyboardBottom(event, 'handleOkTodayButton');
-    }
-    static addDateEventToElement(dateElement, isEventDisabled) {
-        const eventElement = document.createElement('div');
-        eventElement.classList.add('event-date');
-        dateElement.appendChild(eventElement);
-        if (isEventDisabled) {
-            dateElement.classList.add('event-disabled');
-            dateElement.setAttribute('aria-disabled', 'true');
-        }
-    }
-    updateGrid() {
-        var _a;
-        let flag;
-        const fd = this.focusDay;
-        const eventDateObjects = (_a = this.eventDates) === null || _a === void 0 ? void 0 : _a.map((event) => {
-            return new Date(event.date);
-        });
-        this.monthYearNode.textContent = `${this.monthLabels ? this.monthLabels[fd.getMonth()] : []} ${fd.getFullYear()}`;
-        const firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
-        const dayOfWeek = firstDayOfMonth.getDay();
-        firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
-        const d = new Date(firstDayOfMonth);
-        this.days.forEach((dateElement, index) => {
-            var _a;
-            this.days[index].classList.remove('event-disabled');
-            flag = d.getMonth() !== fd.getMonth();
-            DatePickerDialog.updateDate(this.days[index], flag, d, DatePickerDialog.isSameDay(d, this.selectedDay));
-            d.setDate(d.getDate() + 1);
-            dateElement.classList.remove('event-disabled');
-            const date = new Date(dateElement.getAttribute('data-date'));
-            if (date && eventDateObjects) {
-                const matchingEventIndex = eventDateObjects.findIndex((eventDate) => eventDate.toDateString() === date.toDateString());
-                if (matchingEventIndex !== -1) {
-                    const isEventDisabled = this.eventDates && ((_a = this.eventDates[matchingEventIndex]) === null || _a === void 0 ? void 0 : _a.disabled);
-                    DatePickerDialog.addDateEventToElement(dateElement, isEventDisabled);
-                }
-            }
-            if (index === 35 && this.lastRowNode) {
-                this.lastRowNode.style.visibility = flag ? 'hidden' : 'visible';
-            }
-        });
-    }
-    handleDayClick(event) {
-        if (!DatePickerDialog.isDayDisabled(event.currentTarget) && !DatePickerDialog.isDayEventDisabled(event.currentTarget)) {
-            this.setTextBoxDate(event.currentTarget);
-            this.close(true);
-        }
-        event.stopPropagation();
-        event.preventDefault();
-    }
-    handleDayKeyDown(event) {
-        let flag = false;
-        switch (event.key) {
-            case 'Esc':
-            case 'Escape':
-                this.close(true);
-                break;
-            case ' ':
-                this.setTextBoxDate(event.currentTarget);
-                flag = true;
-                break;
-            case 'Enter':
-                if (!DatePickerDialog.isDayEventDisabled(event.currentTarget)) {
-                    this.setTextBoxDate(event.currentTarget);
-                    this.close(true);
-                }
-                flag = true;
-                break;
-            case 'Tab':
-                this.okTodayButtonNode.focus();
-                if (event.shiftKey) {
-                    this.nextYearNode.focus();
-                }
-                flag = true;
-                break;
-            case 'Right':
-            case 'ArrowRight':
-                this.moveFocusToNextDay();
-                flag = true;
-                break;
-            case 'Left':
-            case 'ArrowLeft':
-                this.moveFocusToPreviousDay();
-                flag = true;
-                break;
-            case 'Down':
-            case 'ArrowDown':
-                this.moveFocusToNextWeek();
-                flag = true;
-                break;
-            case 'Up':
-            case 'ArrowUp':
-                this.moveFocusToPreviousWeek();
-                flag = true;
-                break;
-            case 'PageUp':
-                if (event.shiftKey) {
-                    this.moveToPreviousYear();
-                }
-                else {
-                    this.moveToPreviousMonth();
-                }
-                this.setFocusDay(true);
-                flag = true;
-                break;
-            case 'PageDown':
-                if (event.shiftKey) {
-                    this.moveToNextYear();
-                }
-                else {
-                    this.moveToNextMonth();
-                }
-                this.setFocusDay(true);
-                flag = true;
-                break;
-            case 'Home':
-                this.moveFocusToFirstDayOfWeek();
-                flag = true;
-                break;
-            case 'End':
-                this.moveFocusToLastDayOfWeek();
-                flag = true;
-                break;
-            default:
-                break;
-        }
-        if (flag) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    static isSameDay(day1, day2) {
-        return day1.getFullYear() === day2.getFullYear() && day1.getMonth() === day2.getMonth() && day1.getDate() === day2.getDate();
-    }
-    static formatDate(date) {
-        let day = date.getDate().toString();
-        if (date.getDate() <= 9) {
-            day = `0${day}`;
-        }
-        let month = date.getMonth() + 1;
-        if (date.getMonth() <= 9) {
-            month = `0${month}`;
-        }
-        const year = date.getFullYear();
-        return `${year}-${month}-${day}`;
-    }
-    static updateDate(domNode, disable, day, selected) {
-        const dateFormatted = DatePickerDialog.formatDate(day);
-        const dayAreaLabel = day.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
-        domNode.setAttribute('tab-index', '-1');
-        domNode.removeAttribute('aria-selected');
-        domNode.setAttribute('data-date', `${dateFormatted}`);
-        domNode.setAttribute('aria-label', `${dayAreaLabel}`);
-        if (disable) {
-            domNode.classList.add('disabled');
-            domNode.setAttribute('aria-disabled', 'true');
-            // eslint-disable-next-line no-param-reassign
-            domNode.textContent = day.getDate();
-        }
-        else {
-            domNode.classList.remove('disabled');
-            // eslint-disable-next-line no-param-reassign
-            domNode.textContent = day.getDate();
-            if (selected) {
-                domNode.setAttribute('aria-selected', 'true');
-                // eslint-disable-next-line no-param-reassign
-                domNode.tabIndex = 0;
-            }
-        }
-    }
-    static getDayFromDataDateAttribute(domNode) {
-        const parts = domNode.getAttribute('data-date').split('-');
-        return new Date(parts[0], parseInt(parts[1], 10) - 1, parts[2]);
-    }
-    static isDayDisabled(domNode) {
-        return domNode.classList.contains('disabled');
-    }
-    static isDayEventDisabled(domNode) {
-        return domNode.classList.contains('event-disabled');
-    }
-    setTextBoxDate(domNode) {
-        var _a;
-        let d = this.focusDay;
-        let dateFormatted = DatePickerDialog.formatDate(d);
-        if (domNode) {
-            d = DatePickerDialog.getDayFromDataDateAttribute(domNode);
-            dateFormatted = DatePickerDialog.formatDate(d);
-            // updated aria-selected
-            this.days.forEach((day) => (day === domNode ? day.setAttribute('aria-selected', 'true') : day.removeAttribute('aria-selected')));
-        }
-        if (this.textBoxNode) {
-            this.textBoxNode.value = dateFormatted;
-        }
-        (_a = this.textBoxNode) === null || _a === void 0 ? void 0 : _a.setAttribute('value', this.textBoxNode.value);
-        this.setDateForButtonLabel();
-    }
-    getDateFromTextBox() {
-        const parts = this.textBoxNode ? this.textBoxNode.value.split('-') : [];
-        const month = parseInt(parts[1], 10);
-        const day = parseInt(parts[2], 10);
-        let year = parseInt(parts[0], 10);
-        if (parts.length === 3 && Number.isInteger(month) && Number.isInteger(day) && Number.isInteger(year)) {
-            if (year < 100) {
-                year = 2000 + year;
-            }
-            this.focusDay = new Date(year, month - 1, day);
-            this.selectedDay = new Date(this.focusDay);
-        }
-        else {
-            // If not a valid date (MM/DD/YY) initialize with todays date
-            this.focusDay = new Date();
-            this.selectedDay = new Date(0, 0, 1);
-        }
-    }
-    open() {
-        this.dialogNode.style.display = 'block';
-        this.dialogNode.style.zIndex = '2';
-        if (this.textBoxNode) {
-            this.textBoxNode.classList.add('focus');
-        }
-        this.getDateFromTextBox();
-        this.updateGrid();
-    }
-    handleEscEvent(event) {
-        if (event.key === 'Escape') {
-            this.dialogNode.style.display = 'none';
-            if (this.textBoxNode) {
-                this.textBoxNode.focus();
-            }
-        }
-    }
-    isOpen() {
-        return this.dialogNode.style.display !== 'none';
-    }
-    close(flag) {
-        const localFlag = flag;
-        this.dialogNode.style.display = 'none';
-        if (this.textBoxNode) {
-            this.textBoxNode.classList.remove('focus');
-        }
-        if (localFlag) {
-            this.buttonNode.focus();
-        }
-    }
-    moveToNextYear() {
-        this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
-        this.updateGrid();
-    }
-    moveToPreviousYear() {
-        this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
-        this.updateGrid();
-    }
-    moveToNextMonth() {
-        this.focusDay.setMonth(this.focusDay.getMonth() + 1);
-        this.updateGrid();
-    }
-    moveToPreviousMonth() {
-        this.focusDay.setMonth(this.focusDay.getMonth() - 1);
-        this.updateGrid();
-    }
-    moveFocusToNextDay() {
-        const d = new Date(this.focusDay);
-        d.setDate(d.getDate() + 1);
-        this.moveFocusToDay(d);
-    }
-    moveFocusToNextWeek() {
-        const d = new Date(this.focusDay);
-        d.setDate(d.getDate() + 7);
-        this.moveFocusToDay(d);
-    }
-    moveFocusToPreviousDay() {
-        const d = new Date(this.focusDay);
-        d.setDate(d.getDate() - 1);
-        this.moveFocusToDay(d);
-    }
-    moveFocusToPreviousWeek() {
-        const d = new Date(this.focusDay);
-        d.setDate(d.getDate() - 7);
-        this.moveFocusToDay(d);
-    }
-    moveFocusToFirstDayOfWeek() {
-        const d = new Date(this.focusDay);
-        d.setDate(d.getDate() - d.getDay());
-        this.moveFocusToDay(d);
-    }
-    moveFocusToLastDayOfWeek() {
-        const d = new Date(this.focusDay);
-        d.setDate(d.getDate() + (6 - d.getDay()));
-        this.moveFocusToDay(d);
-    }
-    handlePreviousMonthButton(event) {
-        this.handleEventKeyboardTop(event, this.moveToPreviousMonth());
-    }
-    handleNextMonthButton(event) {
-        this.handleEventKeyboardTop(event, this.moveToNextMonth());
-    }
-    handleNextYearButton(event) {
-        this.handleEventKeyboardTop(event, this.moveToNextYear());
-    }
-    handlePreviousYearButton(event) {
-        this.handleEventKeyboardTop(event, 'moveToPreviousYear');
-    }
-    handleBackgroundMouseUp(event) {
-        if (!this.isOpen()) {
-            return;
-        }
-        if (!this.buttonNode.contains(event.target) && !this.dialogNode.contains(event.target)) {
-            this.close(false);
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-}
-export default DatePickerDialog;

package/dist/components/ui/organisms/input-date/index.js

@@ -1 +0,0 @@
-export { InputDate } from './input-date';