@dodlhuat/basix 1.2.3 → 1.2.4

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.2.1
+# Basix 1.2.4
 
 Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to
 include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.
@@ -781,6 +781,8 @@ The TimeSpanPicker component provides a paired start/end time input for selectin
 const picker = new TimeSpanPicker('my-container', {
     defaultStart: '09:00',
     defaultEnd:   '17:00',
+    fromString:   'Von',   // optional — defaults to 'From'
+    toString:     'Bis',   // optional — defaults to 'To'
     onChange: (start, end) => console.log(start, end),
 });
 

package/js/timepicker.js

@@ -22,6 +22,18 @@ class TimeSpanPicker {
         if (options?.defaultEnd) {
             this.endTimeInput.value = options.defaultEnd;
         }
+        if (options?.fromString) {
+            this.fromString = options.fromString;
+        }
+        else {
+            this.fromString = 'From';
+        }
+        if (options?.toString) {
+            this.toString = options.toString;
+        }
+        else {
+            this.toString = 'To';
+        }
         this.attachEventListeners();
         // Render initial state if defaults provided
         if (options?.defaultStart || options?.defaultEnd) {
@@ -41,7 +53,7 @@ class TimeSpanPicker {
         this.container.innerHTML = `
       <div class="timespan-picker">
         <div class="timespan-field timespan-field-start">
-          <label for="${startId}">From</label>
+          <label for="${startId}">${this.fromString}</label>
           <input type="time" class="timespan-start" id="${startId}"/>
         </div>
 
@@ -51,7 +63,7 @@ class TimeSpanPicker {
         </div>
 
         <div class="timespan-field timespan-field-end">
-          <label for="${endId}">To</label>
+          <label for="${endId}">${this.toString}</label>
           <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>

package/js/timepicker.ts

@@ -7,6 +7,8 @@ interface TimeSpanPickerOptions {
     onChange?: (start: string, end: string) => void;
     defaultStart?: string;
     defaultEnd?: string;
+    fromString?: string;
+    toString?: string;
 }
 
 class TimeSpanPicker {
@@ -15,6 +17,8 @@ class TimeSpanPicker {
     private endTimeInput: HTMLInputElement;
     private onChange?: (start: string, end: string) => void;
     private readonly uid: string;
+    private fromString: string;
+    private toString: string;
 
     constructor(elementOrSelector: string | HTMLElement, options?: TimeSpanPickerOptions) {
         const element = typeof elementOrSelector === 'string'
@@ -30,6 +34,8 @@ class TimeSpanPicker {
         this.container = element;
         this.onChange = options?.onChange;
         this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
+        this.fromString = options?.fromString ?? 'From';
+        this.toString = options?.toString ?? 'To';
 
         this.render();
 
@@ -65,7 +71,7 @@ class TimeSpanPicker {
         this.container.innerHTML = `
       <div class="timespan-picker">
         <div class="timespan-field timespan-field-start">
-          <label for="${startId}">From</label>
+          <label for="${startId}">${this.fromString}</label>
           <input type="time" class="timespan-start" id="${startId}"/>
         </div>
 
@@ -75,7 +81,7 @@ class TimeSpanPicker {
         </div>
 
         <div class="timespan-field timespan-field-end">
-          <label for="${endId}">To</label>
+          <label for="${endId}">${this.toString}</label>
           <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",