@luftborn/custom-elements 2.8.1 → 2.8.3

package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.ts

@@ -0,0 +1,363 @@
+import { CustomDatepickerStyles } from "./CustomDatepickerStyles";
+import { defaultDateFormat, formatDate, isMobileDevice, supportedDateFormats } from "./CustomDatepickerUtils";
+import { GetMonths, GetWeekdays } from "./DatepickerTranslations";
+
+type CustomDatepickerOptions = {
+    input: HTMLInputElement;
+    dateFormat: string;
+    language?: string;
+    otherTriggers?: HTMLElement[];
+    parentElement?: ShadowRoot | HTMLElement;
+}
+
+export default class CustomDatepicker {
+    private input: HTMLInputElement;
+    private otherTriggers: HTMLElement[];
+    private parentElement: ShadowRoot | HTMLElement;
+
+    private datepicker: HTMLElement;
+    private header: HTMLElement;
+    private monthYear: HTMLElement;
+    private selectNextMonth: HTMLElement;
+    private selectPrevMonth: HTMLElement;
+    private weekdays: HTMLElement;
+    private days: HTMLElement;
+    private selectMonthYear: HTMLElement;
+    private selectDate: HTMLElement;
+    private currentDate: Date;
+    private currentMonth: number;
+    private currentYear: number;
+    private selectedDate: Date;
+    private selectedMonth: number;
+    private selectedYear: number;
+    private selectedDay: number;
+    private firstDayOfMonth: Date;
+    private lastDayOfMonth: Date;
+    private firstDay: number;
+    private lastDay: number;
+
+    private months: string[] = [];
+    private daysOfWeek: string[] = [];
+
+    private dateFormat: string;
+
+    constructor(options: CustomDatepickerOptions) {
+        this.input = options.input;
+        this.dateFormat = supportedDateFormats.includes(options.dateFormat) ? options.dateFormat : defaultDateFormat;
+        this.otherTriggers = options.otherTriggers || [];
+        this.parentElement = options.parentElement;
+
+        this.currentDate = new Date();
+        this.currentMonth = this.currentDate.getMonth();
+        this.currentYear = this.currentDate.getFullYear();
+        this.selectedDate = new Date();
+        this.selectedMonth = this.selectedDate.getMonth();
+        this.selectedYear = this.selectedDate.getFullYear();
+        this.selectedDay = this.selectedDate.getDate();
+        this.firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
+        this.lastDayOfMonth = new Date(this.currentYear, this.currentMonth + 1, 0);
+        this.firstDay = this.firstDayOfMonth.getDay();
+        this.lastDay = this.lastDayOfMonth.getDate();
+
+        this.months = GetMonths(options.language);
+        this.daysOfWeek = GetWeekdays(options.language, 'short');
+
+        this.createDatePickerElements();
+        this.renderCalendar();
+        this.initSelectMonthYear();
+        this.addEventListeners();
+    }
+
+    private createDatePickerElements() {
+        this.datepicker = document.createElement('div');
+        this.datepicker.classList.add('datepicker');
+        this.header = document.createElement('div');
+        this.header.classList.add('header');
+        this.monthYear = document.createElement('span');
+        this.monthYear.classList.add('month-year');
+        this.monthYear.onclick = () => this.toggleSelectMonthYear();
+        this.selectNextMonth = document.createElement('span');
+        this.selectNextMonth.classList.add('next-month');
+        this.selectNextMonth.innerHTML = '▶';
+        this.selectNextMonth.onclick = () => this.moveMonth(1);
+        this.selectPrevMonth = document.createElement('span');
+        this.selectPrevMonth.classList.add('prev-month');
+        this.selectPrevMonth.innerHTML = '◀';
+        this.selectPrevMonth.onclick = () => this.moveMonth(-1);
+        this.header.appendChild(this.selectPrevMonth);
+        this.header.appendChild(this.monthYear);
+        this.header.appendChild(this.selectNextMonth);
+
+        this.weekdays = document.createElement('div');
+        this.weekdays.classList.add('weekdays');
+        this.days = document.createElement('div');
+        this.days.classList.add('days');
+        this.selectMonthYear = document.createElement('div');
+        this.selectMonthYear.classList.add('select-month-year');
+        this.selectDate = document.createElement('div');
+        this.selectDate.classList.add('select-date');
+        this.datepicker.appendChild(this.header);
+        this.datepicker.appendChild(this.selectDate);
+        this.selectDate.appendChild(this.weekdays);
+        this.selectDate.appendChild(this.days);
+        this.datepicker.appendChild(this.selectMonthYear);
+
+        let actions = document.createElement('div');
+        actions.classList.add('actions');
+        this.selectDate.appendChild(actions);
+        let cancel = document.createElement('input');
+        cancel.type = 'reset';
+        cancel.value = 'Cancel';
+        cancel.onclick = () => this.showPicker(false);
+        actions.appendChild(cancel);
+        let today = document.createElement('input');
+        today.type = 'reset';
+        today.value = 'Today';
+        today.onclick = () => this.setDateForToday();
+        actions.appendChild(today);
+
+        if (this.input.parentElement) {
+            this.input.parentElement.appendChild(this.datepicker);
+        } else {
+            document.body.appendChild(this.datepicker);
+        }
+
+        this.applyStyles();
+    }
+
+    private applyStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = CustomDatepickerStyles;
+        this.datepicker.appendChild(style);
+    }
+
+    private moveMonth(steps: number) {
+        let newMonth = this.currentMonth + steps;
+        let newYear = this.currentYear;
+        if (newMonth < 0) {
+            newYear = this.currentYear + Math.floor(newMonth / 12);
+            newMonth = 12 + (newMonth % 12);
+        } else if (newMonth > 11) {
+            newYear = this.currentYear + Math.floor(newMonth / 12);
+            newMonth = newMonth % 12;
+        }
+        this.currentMonth = newMonth;
+        this.currentYear = newYear;
+        this.firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
+        this.lastDayOfMonth = new Date(this.currentYear, this.currentMonth + 1, 0);
+        this.firstDay = this.firstDayOfMonth.getDay();
+        this.lastDay = this.lastDayOfMonth.getDate();
+        this.renderCalendar();
+    }
+
+    private renderCalendar() {
+        this.monthYear.innerHTML = this.months[this.currentMonth] + ' ' + this.currentYear;
+        this.weekdays.innerHTML = '';
+        for (let i = 0; i < this.daysOfWeek.length; i++) {
+            let span = document.createElement('span');
+            span.innerHTML = this.daysOfWeek[i];
+            this.weekdays.appendChild(span);
+        }
+        this.days.innerHTML = '';
+        for (let i = 0; i < 42; i++) {
+            let span = document.createElement('span');
+            if (i < this.firstDay) {
+                span.classList.add('day-of-previous-month');
+                span.style.color = '#ccc';
+                let currentDate = new Date(this.currentYear, this.currentMonth, 0);
+                span.innerHTML = (currentDate.getDate() - this.firstDay + i + 1).toString();
+            } else if (i < this.lastDay + this.firstDay) {
+                span.classList.add('day-of-current-month');
+                span.innerHTML = (i - this.firstDay + 1).toString();
+                if (i - this.firstDay + 1 === this.selectedDay && this.currentMonth === this.selectedMonth && this.currentYear === this.selectedYear) {
+                    span.classList.add('selected-day')
+                }
+            } else {
+                span.classList.add('day-of-next-month');
+                span.style.color = '#ccc';
+                span.innerHTML = (i - this.lastDay - this.firstDay + 1).toString();
+            }
+            span.onclick = () => {
+                let moveMonthSteps = 0;
+                this.selectedDay = parseInt(span.innerHTML);
+                if (span.classList.contains('day-of-previous-month')) {
+                    this.selectedMonth = this.currentMonth - 1;
+                    this.selectedYear = this.currentYear;
+                    moveMonthSteps = -1;
+                } else if (span.classList.contains('day-of-current-month')) {
+                    this.selectedMonth = this.currentMonth;
+                    this.selectedYear = this.currentYear;
+                } else {
+                    this.selectedMonth = this.currentMonth + 1;
+                    this.selectedYear = this.currentYear;
+                    moveMonthSteps = 1;
+                }
+                this.selectedDate = new Date(this.selectedYear, this.selectedMonth, this.selectedDay);
+                let selectedDayElement = this.days.querySelector('.selected-day');
+                if (selectedDayElement) {
+                    selectedDayElement.classList.remove('selected-day');
+                }
+                span.classList.add('selected-day');
+
+                const formattedDate = formatDate(this.selectedDate, this.dateFormat);
+                this.input.value = formattedDate;
+
+                this.showPicker(false);
+            };
+            this.days.appendChild(span);
+        }
+
+        this.positionPicker();
+    }
+
+    private initSelectMonthYear() {
+        this.selectMonthYear.style.display = 'none';
+        this.selectMonthYear.style.height = '200px';
+        if (isMobileDevice()) {
+            this.selectMonthYear.style.height = '300px';
+        }
+        this.selectMonthYear.innerHTML = '';
+        let monthsContainer = document.createElement('div');
+        monthsContainer.classList.add('months');
+        for (let i = 0; i < this.months.length; i++) {
+            let span = document.createElement('span');
+            span.innerHTML = this.months[i].substring(0, 3);
+            span.classList.add('select-month');
+            monthsContainer.appendChild(span);
+            span.onclick = () => {
+                this.selectedMonth = this.months.findIndex(month => month.substring(0, 3) === span.innerHTML);
+                let moveMonthSteps = (this.selectedYear - this.currentYear) * 12 + this.selectedMonth - this.currentMonth;
+                this.moveMonth(moveMonthSteps);
+                this.hideSelectMonthYear();
+            }
+        }
+        for (let i = this.currentYear - 100; i < this.currentYear + 100; i++) {
+            let year = document.createElement('div');
+            year.classList.add('year');
+            year.innerHTML = i.toString();
+            this.selectMonthYear.appendChild(year);
+            if (i === this.currentYear) {
+                year.appendChild(monthsContainer);
+            }
+        }
+        let years = this.selectMonthYear.querySelectorAll('.year');
+        let tempSelectedYear = this.selectedYear;
+        for (let i = 0; i < years.length; i++) {
+            years[i].addEventListener('click', () => {
+                let year = parseInt(years[i].innerHTML);
+                if (year === tempSelectedYear) {
+                    return;
+                } else {
+                    tempSelectedYear = year;
+                    this.selectedYear = year;
+                    let monthsContainers = this.selectMonthYear.querySelectorAll('.months');
+                    for (let i = 0; i < monthsContainers.length; i++) {
+                        monthsContainers[i].remove();
+                    }
+                    years[i].appendChild(monthsContainer);
+                }
+            });
+        }
+    }
+
+    private toggleSelectMonthYear() {
+        if (this.selectMonthYear.style.display === 'none') {
+            this.selectDate.style.display = 'none';
+            this.selectMonthYear.style.display = 'block';
+            this.header.style.color = '#ccc';
+            let years = this.selectMonthYear.querySelectorAll('.year');
+            for (let i = 0; i < years.length; i++) {
+                if (years[i].querySelector('.months')) {
+                    years[i].scrollIntoView();
+                    break;
+                }
+            }
+        } else {
+            this.hideSelectMonthYear();
+        }
+    }
+
+    private hideSelectMonthYear() {
+        this.selectDate.style.display = 'block';
+        this.selectMonthYear.style.display = 'none';
+        this.header.style.color = '#000';
+    }
+
+    private showPicker(showpicker: boolean = true) {
+        if (showpicker) {
+            this.positionPicker();
+            this.datepicker.style.display = 'block';
+        } else {
+            this.datepicker.style.display = 'none';
+            this.hideSelectMonthYear();
+            return;
+        }
+    }
+
+    private positionPicker() {
+        this.datepicker.style.position = 'fixed';
+        
+        let datepickerHeight = 250;
+        if (isMobileDevice()) {
+            this.datepicker.style.height = '400px';
+            this.datepicker.style.top = '50%';
+            this.datepicker.style.left = '50%';
+            this.datepicker.style.transform = 'translate(-50%, -50%)';
+            this.datepicker.style.width = '90%';
+            this.datepicker.style.maxWidth = '300px';
+            this.datepicker.style.fontSize = '16px';
+            this.datepicker.style.padding = '30px';
+            this.header.style.marginBottom = '20px';
+            let weekdaysSpans = this.weekdays.querySelectorAll('span');
+            let daysSpans = this.days.querySelectorAll('span');
+            weekdaysSpans.forEach(span => span.style.marginBottom = '10px');
+            daysSpans.forEach(span => span.style.marginBottom = '10px');
+        } else {
+            this.datepicker.style.height = datepickerHeight + 'px';
+            let dateInputRect = this.input.getBoundingClientRect();
+            datepickerHeight += 20;
+            if (window.innerHeight - dateInputRect.bottom < datepickerHeight) {
+                this.datepicker.style.top = 'auto';
+                this.datepicker.style.bottom = window.innerHeight - dateInputRect.top + 'px';
+            } else {
+                this.datepicker.style.bottom = 'auto';
+                this.datepicker.style.top = dateInputRect.bottom + 'px';
+            }
+            this.datepicker.style.left = dateInputRect.left + 'px';
+        }
+    }
+
+    private setDateForToday() {
+        this.input.value = formatDate(this.selectedDate, this.dateFormat);
+        this.showPicker(false);
+    }
+
+    private addEventListeners() {
+        this.input.addEventListener('click', () => this.showPicker(true));
+        this.input.addEventListener('focus', () => this.showPicker(true));
+        this.input.addEventListener('change', () => {
+            const date = new Date(this.input.value);
+            if (date.toString() !== 'Invalid Date') {
+                this.selectedDate = date;
+                this.selectedMonth = date.getMonth();
+                this.selectedYear = date.getFullYear();
+                this.selectedDay = date.getDate();
+                this.renderCalendar();
+            }
+        });
+
+        this.otherTriggers.forEach(trigger => {
+            trigger.addEventListener('click', () => this.showPicker(true));
+        });
+
+        document.onclick = (event: Event) => {
+            const elementsToNeglect = [this.input, this.datepicker, this.monthYear, this.weekdays, this.days, this.header, this.selectMonthYear];
+            const element = event.target as HTMLElement;
+            const isNeglected = elementsToNeglect.includes(element) || elementsToNeglect.includes(element.parentElement) || (element).classList.contains('select-month') || element === this.parentElement;
+            
+            if (!isNeglected){
+                this.showPicker(false);
+            }
+        };
+    }
+}

package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.ts

@@ -0,0 +1,101 @@
+export const CustomDatepickerStyles = `
+    .datepicker {
+        position: fixed;
+        background-color: #fff;
+        display: none;
+        width: 200px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        padding: 10px;
+        margin: 0 auto;
+        box-shadow: 0 0 10px 0 #ccc;
+        font: 12px Arial, sans-serif;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+    .weekdays {
+        display: flex;
+        justify-content: space-between;
+    }
+    .weekdays span {
+        width: 14.28%;
+        text-align: center;
+        padding: 5px 0;
+    }
+    .days {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .days span {
+        width: 14.28%;
+        text-align: center;
+        padding: 5px 0;
+    }
+    .days span:hover {
+        background-color: #B2d5ff;
+        cursor: pointer;
+    }
+    .days span.today {
+        border: 1px solid #000;
+    }
+    .days span.selected-day {
+        background-color: #0075ff;
+        color: #fff;
+    }
+    .prev-month, .next-month {
+        cursor: pointer;
+    }
+    .month-year {
+        font-weight: bold;
+    }
+    .month-year:hover {
+        cursor: pointer;
+    }
+    .select-month-year {
+        display: none;
+        width: 100%;
+        overflow-y: auto;
+    }
+    .select-month-year .year {
+        text-align: center;
+        background-color: #f0f0f0;
+        border-bottom: 1px solid #3f3d3d;
+        padding: 5px 0;
+        cursor: pointer;
+    }
+    .select-month-year .year .months {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .select-month-year .year .months span {
+        width: 25%;
+        text-align: center;
+        padding: 10px 0;
+        background-color: #fff;
+    }
+    .select-month-year .year .months span:hover {
+        background-color: #B2d5ff;
+        cursor: pointer;
+    }
+    .actions {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+    }
+    .actions input {
+        color: #0075ff;
+        border: none;
+        background-color: transparent;
+        padding: 5px;
+        border: 1px solid transparent;
+    }
+    .actions input:hover {
+        background-color: #B2d5ff;
+        border-color: #000;
+    }
+`;

package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerUtils.ts

@@ -0,0 +1,44 @@
+export const months: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+export const daysOfWeek: string[] = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+export const defaultDateFormat = 'yyyy-mm-dd';
+export const supportedDateFormats = [
+    'ddmmyyyy',
+    'mmddyyyy',
+    'dd/mm/yyyy',
+    'mm/dd/yyyy',
+    'dd-mm-yyyy',
+    'mm-dd-yyyy',
+    'yyyy-mm-dd',
+    'yyyy-dd-mm',
+    'Month dd, yyyy',
+    'mm/dd/yy',
+    'dd/mm/yy',
+];
+
+export function formatDate(date: Date, dateFormat: string): string {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const monthName = date.toLocaleString('default', { month: 'long' });
+    
+    const dateFormats = {
+        'ddmmyyyy': `${day}${month}${year}`,
+        'mmddyyyy': `${month}${day}${year}`,
+        'dd/mm/yyyy': `${day}/${month}/${year}`,
+        'mm/dd/yyyy': `${month}/${day}/${year}`,
+        'dd-mm-yyyy': `${day}-${month}-${year}`,
+        'mm-dd-yyyy': `${month}-${day}-${year}`,
+        'yyyy-mm-dd': `${year}-${month}-${day}`,
+        'yyyy-dd-mm': `${year}-${day}-${month}`,
+        'Month dd, yyyy': `${monthName} ${day}, ${year}`,
+        'mm/dd/yy': `${month}/${day}/${year.toString().slice(-2)}`,
+        'dd/mm/yy': `${day}/${month}/${year.toString().slice(-2)}`,
+    }
+
+    return dateFormats[dateFormat];
+}
+
+export function isMobileDevice() {
+    return /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 480;
+}