@luftborn/custom-elements 2.8.1 → 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

@@ -1,20 +1,23 @@
 import CustomElement from '../../framework/custom-element.decorator';
 import { CustomInputElement } from '../../framework/CustomInputElement';
 import { CustomElementEventArgs } from '../../framework/CustomEvents';
-const flatpickr = require('flatpickr');
+import CustomDatepicker from './CustomDatepicker/CustomDatepicker';
+import { defaultDateFormat, supportedDateFormats } from './CustomDatepicker/CustomDatepickerUtils';
 
 @CustomElement({
 	selector: 'custom-format-date-element',
 	template: `
-		<div class="wrapper flatpickr">
-			<input type="text" id="date-field" data-input />
+		<div class="wrapper">
+			<input type="text" id="date-field" readonly />
 			<svg id="picker-trigger" data-toggle viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="4" width="20" height="18" rx="1" fill="#000"/><rect x="4" y="8" width="16" height="12" fill="white"/><path d="M4 10H20" stroke="#000" stroke-width="1"/><circle cx="16" cy="14" r="2" fill="#F44336"/><rect x="6" y="2" width="3" height="4" rx=".5" fill="#000"/><rect x="15" y="2" width="3" height="4" rx=".5" fill="#000"/></svg>
 		</div>`,
 	style: `
-		@import '../../../node_modules/flatpickr/dist/flatpickr.min.css';
 		:host{
 			width:100%;
 		}
+		* {
+			box-sizing: border-box;
+		}
 		.wrapper{
 			display:flex;
 			position: relative;
@@ -40,34 +43,15 @@ const flatpickr = require('flatpickr');
 			right: 2px;
 			top: 15%;
 		}
-		.flatpickr-calendar {
-			position: fixed !important; /* Use fixed positioning */
-			top: 50% !important; /* Center vertically */
-			left: 50% !important; /* Center horizontally */
-			z-index: 1000 !important; /* Ensure it's above other content */
-		}
 	`,
 	useShadow: true,
 })
 export class CustomFormatDateFieldElement extends CustomInputElement {
 	date: HTMLInputElement;
 	dateWrapper: HTMLElement;
-	datepicker: any;
-
-	private readonly defaultDateFormat = 'yyyy-mm-dd';
-	private readonly 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',
-	];
+	pickerTrigger: HTMLElement;
+	language: string;
+	datePicker: CustomDatepicker;
 
 	constructor() {
 		super();
@@ -91,9 +75,9 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 
 	initChildInputs() {
 		this.date = super.getChildInput('#date-field');
-		this.dateWrapper = super.getChildInput('.flatpickr');
-		this.validateDateFormats();
+		this.pickerTrigger = this.getChildElement('#picker-trigger');
 
+		this.dateFormat = supportedDateFormats.includes(this.dateFormat) ? this.dateFormat : defaultDateFormat;
 		this.date.placeholder = this.dateFormat;
 
 		this.date.addEventListener('change', this.change.bind(this));
@@ -107,7 +91,8 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 			this.date.setAttribute('min', this.min);
 		}
 
-		this.initFlatpickr();
+		this.language = this.attributes.getNamedItem('language')?.value || 'en';
+		this.initCustomPicker();
 	}
 
 	// events
@@ -123,48 +108,26 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 		);
 	}
 
-	initFlatpickr() {
-		flatpickr(this.dateWrapper, {
-			wrap: true,
-			altInput: true,
-			appendTo: this.shadowRoot.querySelector('.wrapper'),
-			disableMobile: true,
-			parseDate: (datestr) => {
-				return new Date(datestr);
-			},
-			formatDate: (date, format) => {
-				return this.formatDate(date);
-			}
-		});
+	attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+		this.attributeChanged(name, oldValue, newValue);
 	}
 
-	private formatDate(date: Date): 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)}`,
+	private attributeChanged(name: string, oldValue: string, newValue: string): void {
+		switch (name) {
+			case 'language':
+				this.language = newValue;
+				this.initCustomPicker();
+				break;
 		}
-
-		return dateFormats[this.dateFormat];
 	}
 
-	private validateDateFormats() {
-		if (!this.supportedDateFormats.includes(this.dateFormat)) {
-			this.dateFormat = this.defaultDateFormat;
-		}
+	initCustomPicker() {
+		this.datePicker = new CustomDatepicker({
+			input: this.date,
+			dateFormat: this.dateFormat,
+			otherTriggers: [this.pickerTrigger],
+			parentElement: this,
+			language: this.language,
+		})
 	}
 }