@luftborn/custom-elements 2.8.2 → 2.8.4

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

@@ -1,9 +1,11 @@
 import { CustomDatepickerStyles } from "./CustomDatepickerStyles";
-import { daysOfWeek, defaultDateFormat, formatDate, isMobileDevice, months, supportedDateFormats } from "./CustomDatepickerUtils";
+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;
 }
@@ -33,6 +35,10 @@ export default class CustomDatepicker {
     private lastDayOfMonth: Date;
     private firstDay: number;
     private lastDay: number;
+    private language: string;
+
+    private months: string[] = [];
+    private daysOfWeek: string[] = [];
 
     private dateFormat: string;
 
@@ -54,6 +60,10 @@ export default class CustomDatepicker {
         this.firstDay = this.firstDayOfMonth.getDay();
         this.lastDay = this.lastDayOfMonth.getDate();
 
+        this.language = options.language || 'en';
+        this.months = GetMonths(this.language);
+        this.daysOfWeek = GetWeekdays(options.language, 'short');
+
         this.createDatePickerElements();
         this.renderCalendar();
         this.initSelectMonthYear();
@@ -143,11 +153,12 @@ export default class CustomDatepicker {
     }
 
     private renderCalendar() {
-        this.monthYear.innerHTML = months[this.currentMonth] + ' ' + this.currentYear;
+        const monthName = this.months[this.currentMonth];
+        this.monthYear.innerHTML = monthName.charAt(0).toUpperCase() + monthName.slice(1) + ' ' + this.currentYear;
         this.weekdays.innerHTML = '';
-        for (let i = 0; i < daysOfWeek.length; i++) {
+        for (let i = 0; i < this.daysOfWeek.length; i++) {
             let span = document.createElement('span');
-            span.innerHTML = daysOfWeek[i];
+            span.innerHTML = this.daysOfWeek[i];
             this.weekdays.appendChild(span);
         }
         this.days.innerHTML = '';
@@ -191,7 +202,7 @@ export default class CustomDatepicker {
                 }
                 span.classList.add('selected-day');
 
-                const formattedDate = formatDate(this.selectedDate, this.dateFormat);
+                const formattedDate = formatDate(this.selectedDate, this.dateFormat, this.language);
                 this.input.value = formattedDate;
 
                 this.showPicker(false);
@@ -211,13 +222,13 @@ export default class CustomDatepicker {
         this.selectMonthYear.innerHTML = '';
         let monthsContainer = document.createElement('div');
         monthsContainer.classList.add('months');
-        for (let i = 0; i < months.length; i++) {
+        for (let i = 0; i < this.months.length; i++) {
             let span = document.createElement('span');
-            span.innerHTML = months[i].substring(0, 3);
+            span.innerHTML = this.months[i].substring(0, 3);
             span.classList.add('select-month');
             monthsContainer.appendChild(span);
             span.onclick = () => {
-                this.selectedMonth = months.findIndex(month => month.substring(0, 3) === span.innerHTML);
+                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();
@@ -320,7 +331,7 @@ export default class CustomDatepicker {
     }
 
     private setDateForToday() {
-        this.input.value = formatDate(this.selectedDate, this.dateFormat);
+        this.input.value = formatDate(this.selectedDate, this.dateFormat, this.language);
         this.showPicker(false);
     }
 

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

@@ -1,3 +1,5 @@
+import { GetMonths } from "./DatepickerTranslations";
+
 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'];
 
@@ -16,11 +18,12 @@ export const supportedDateFormats = [
     'dd/mm/yy',
 ];
 
-export function formatDate(date: Date, dateFormat: string): string {
+export function formatDate(date: Date, dateFormat: string, language:string = 'en'): 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 monthName = GetMonths(language)[date.getMonth()];
+    const capitalizedMonthName = monthName.charAt(0).toUpperCase() + monthName.slice(1);
     
     const dateFormats = {
         'ddmmyyyy': `${day}${month}${year}`,
@@ -31,7 +34,7 @@ export function formatDate(date: Date, dateFormat: string): string {
         'mm-dd-yyyy': `${month}-${day}-${year}`,
         'yyyy-mm-dd': `${year}-${month}-${day}`,
         'yyyy-dd-mm': `${year}-${day}-${month}`,
-        'Month dd, yyyy': `${monthName} ${day}, ${year}`,
+        'Month dd, yyyy': `${capitalizedMonthName} ${day}, ${year}`,
         'mm/dd/yy': `${month}/${day}/${year.toString().slice(-2)}`,
         'dd/mm/yy': `${day}/${month}/${year.toString().slice(-2)}`,
     }

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

@@ -0,0 +1,188 @@
+export function GetWeekdays(language: string = 'en', type: 'short' | 'abbreviated' | 'wide'= 'wide') : string[] {
+    language = supportedLanguages.includes(language) ? language : 'en';
+    return weekdays[language][type];
+}
+
+export function GetMonths(language: string = 'en', type: 'abbreviated' | 'wide' = 'wide') : string[]{
+    language = supportedLanguages.includes(language) ? language : 'en';
+    return months[language][type];
+}
+
+const supportedLanguages = ['en', 'sv', 'de', 'fr', 'it', 'es', 'cs', 'pt', 'pl', 'nl', 'no', 'da', 'el', 'fi', 'is', 'et', 'lv', 'lt', 'hu'];
+
+const weekdays = {
+    'en': {
+        'short': ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        'abbreviated': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        'wide': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+    },
+    'sv': {
+        'short': ['sö', 'må', 'ti', 'on', 'to', 'fr', 'lö'],
+        'abbreviated': ['sön', 'mån', 'tis', 'ons', 'tor', 'fre', 'lör'],
+        'wide': ['söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag']
+    },
+    'de': {
+        'short': ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+        'abbreviated': ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+        'wide': ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+    },
+    'fr': {
+        'short': ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
+        'abbreviated': ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+        'wide': ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi']
+    },
+    'it': {
+        'short': ['do', 'lu', 'ma', 'me', 'gi', 've', 'sa'],
+        'abbreviated': ['dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab'],
+        'wide': ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato']
+    },
+    'es': {
+        'short': ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sá'],
+        'abbreviated': ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+        'wide': ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado']
+    },
+    'cs': {
+        'short': ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
+        'abbreviated': ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
+        'wide': ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota']
+    },
+    'pt': {
+        'short': ['do', '2ª', '3ª', '4ª', '5ª', '6ª', 'sá'],
+        'abbreviated': ['dom', '2ª', '3ª', '4ª', '5ª', '6ª', 'sáb'],
+        'wide': ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira', 'sábado']
+    },
+    'pl': {
+        'short': ['nd', 'pn', 'wt', 'śr', 'cz', 'pt', 'so'],
+        'abbreviated': ['nd', 'pn', 'wt', 'śr', 'cz', 'pt', 'so'],
+        'wide': ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota']
+    },
+    'nl': {
+        'short': ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+        'abbreviated': ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+        'wide': ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag']
+    },
+    'no': {
+        'short': ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø'],
+        'abbreviated': ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø'],
+        'wide': ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag']
+    },
+    'da': {
+        'short': ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø'],
+        'abbreviated': ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø'],
+        'wide': ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag']
+    },
+    'el': {
+        'short': ['Κυ', 'Δε', 'Τρ', 'Τε', 'Πε', 'Πα', 'Σα'],
+        'abbreviated': ['Κυρ', 'Δευ', 'Τρί', 'Τετ', 'Πέμ', 'Παρ', 'Σάβ'],
+        'wide': ['Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη', 'Παρασκευή', 'Σάββατο']
+    },
+    'fi': {
+        'short': ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+        'abbreviated': ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+        'wide': ['sunnuntai', 'maanantai', 'tiistai', 'keskiviikko', 'torstai', 'perjantai', 'lauantai']
+    },
+    'is': {
+        'short': ['su', 'má', 'þr', 'mi', 'fi', 'fö', 'la'],
+        'abbreviated': ['sun', 'mán', 'þri', 'mið', 'fim', 'fös', 'lau'],
+        'wide': ['sunnudagur', 'mánudagur', 'þriðjudagur', 'miðvikudagur', 'fimmtudagur', 'föstudagur', 'laugardagur']
+    },
+    'et': {
+        'short': ['P', 'E', 'T', 'K', 'N', 'R', 'L'],
+        'abbreviated': ['P', 'E', 'T', 'K', 'N', 'R', 'L'],
+        'wide': ['pühapäev', 'esmaspäev', 'teisipäev', 'kolmapäev', 'neljapäev', 'reede', 'laupäev']
+    },
+    'lv': {
+        'short': ['Sv', 'P', 'O', 'T', 'C', 'Pk', 'Se'],
+        'abbreviated': ['Sv', 'P', 'O', 'T', 'C', 'Pk', 'Se'],
+        'wide': ['svētdiena', 'pirmdiena', 'otrdiena', 'trešdiena', 'ceturtdiena', 'piektdiena', 'sestdiena']
+    },
+    'lt': {
+        'short': ['Sk', 'Pr', 'An', 'Tr', 'Kt', 'Pn', 'Št'],
+        'abbreviated': ['Sk', 'Pr', 'An', 'Tr', 'Kt', 'Pn', 'Št'],
+        'wide': ['sekmadienis', 'pirmadienis', 'antradienis', 'trečiadienis', 'ketvirtadienis', 'penktadienis', 'šeštadienis']
+    },
+    'hu': {
+        'short': ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo'],
+        'abbreviated': ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo'],
+        'wide': ['vasárnap', 'hétfő', 'kedd', 'szerda', 'csütörtök', 'péntek', 'szombat']
+    },
+};
+
+const months = {
+    'en': {
+        'abbreviated': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        'wide': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+    },
+    'sv': {
+        'abbreviated': ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
+        'wide': ['januari', 'februari', 'mars', 'april', 'maj', 'juni', 'juli', 'augusti', 'september', 'oktober', 'november', 'december']
+    },
+    'de': {
+        'abbreviated': ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+        'wide': ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+    },
+    'fr': {
+        'abbreviated': ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
+        'wide': ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+    },
+    'it': {
+        'abbreviated': ['gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic'],
+        'wide': ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre']
+    },
+    'es': {
+        'abbreviated': ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+        'wide': ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre']
+    },
+    'pt': {
+        'abbreviated': ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+        'wide': ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro']
+    },
+    'cs': {
+        'abbreviated': ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
+        'wide': ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen', 'září', 'říjen', 'listopad', 'prosinec']
+    },
+    'pl': {
+        'abbreviated': ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'],
+        'wide': ['styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień']
+    },
+    'nl': {
+        'abbreviated': ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
+        'wide': ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december']
+    },
+    'no': {
+        'abbreviated': ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
+        'wide': ['januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober', 'november', 'desember']
+    },
+    'da': {
+        'abbreviated': ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
+        'wide': ['januar', 'februar', 'marts', 'april', 'maj', 'juni', 'juli', 'august', 'september', 'oktober', 'november', 'december']
+    },
+    'el': {
+        'abbreviated': ['Ιαν', 'Φεβ', 'Μάρ', 'Απρ', 'Μάι', 'Ιούν', 'Ιούλ', 'Αύγ', 'Σεπ', 'Οκτ', 'Νοέ', 'Δεκ'],
+        'wide': ['Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος']
+    },
+    'fi': {
+        'abbreviated': ['tammi', 'helmi', 'maalis', 'huhti', 'touko', 'kesä', 'heinä', 'elo', 'syys', 'lok', 'marras', 'joulu'],
+        'wide': ['tammikuu', 'helmikuu', 'maaliskuu', 'huhtikuu', 'toukokuu', 'kesäkuu', 'heinäkuu', 'elokuu', 'syyskuu', 'lokakuu', 'marraskuu', 'joulukuu']
+    },
+    'is': {
+        'abbreviated': ['jan', 'feb', 'mar', 'apr', 'maí', 'jún', 'júl', 'ágú', 'sep', 'okt', 'nóv', 'des'],
+        'wide': ['janúar', 'febrúar', 'mars', 'apríl', 'maí', 'júní', 'júlí', 'ágúst', 'september', 'október', 'nóvember', 'desember']
+    },
+    'et': {
+        'abbreviated': ['jaan', 'veebr', 'märts', 'apr', 'mai', 'juuni', 'juuli', 'aug', 'sept', 'okt', 'nov', 'dets'],
+        'wide': ['jaanuar', 'veebruar', 'märts', 'aprill', 'mai', 'juuni', 'juuli', 'august', 'september', 'oktoober', 'november', 'detsember']
+    },
+    'lv': {
+        'abbreviated': ['jan', 'feb', 'mar', 'apr', 'mai', 'jūn', 'jūl', 'aug', 'sep', 'okt', 'nov', 'dec'],
+        'wide': ['janvāris', 'februāris', 'marts', 'aprīlis', 'maijs', 'jūnijs', 'jūlijs', 'augusts', 'septembris', 'oktobris', 'novembris', 'decembris']
+    },
+    'lt': {
+        'abbreviated': ['sau', 'vas', 'kov', 'bal', 'geg', 'bir', 'lie', 'rugp', 'rugs', 'spal', 'lapkr', 'gruod'],
+        'wide': ['sausis', 'vasaris', 'kovas', 'balandis', 'gegužė', 'birželis', 'liepa', 'rugpjūtis', 'rugsėjis', 'spalis', 'lapkritis', 'gruodis']
+    },
+    'hu': {
+        'abbreviated': ['jan', 'feb', 'már', 'ápr', 'máj', 'jún', 'júl', 'aug', 'szept', 'okt', 'nov', 'dec'],
+        'wide': ['január', 'február', 'március', 'április', 'május', 'június', 'július', 'augusztus', 'szeptember', 'október', 'november', 'december']
+    },
+};

package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts

@@ -50,6 +50,8 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 	date: HTMLInputElement;
 	dateWrapper: HTMLElement;
 	pickerTrigger: HTMLElement;
+	language: string;
+	datePicker: CustomDatepicker;
 
 	constructor() {
 		super();
@@ -89,6 +91,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 			this.date.setAttribute('min', this.min);
 		}
 
+		this.language = this.attributes.getNamedItem('language')?.value || 'en';
 		this.initCustomPicker();
 	}
 
@@ -105,12 +108,26 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 		);
 	}
 
+	attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+		this.attributeChanged(name, oldValue, newValue);
+	}
+
+	private attributeChanged(name: string, oldValue: string, newValue: string): void {
+		switch (name) {
+			case 'language':
+				this.language = newValue;
+				this.initCustomPicker();
+				break;
+		}
+	}
+
 	initCustomPicker() {
-		new CustomDatepicker({
+		this.datePicker = new CustomDatepicker({
 			input: this.date,
 			dateFormat: this.dateFormat,
 			otherTriggers: [this.pickerTrigger],
 			parentElement: this,
+			language: this.language,
 		})
 	}
 }