@luftborn/custom-elements 2.8.2 → 2.8.3

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,
 		})
 	}
 }