@dodlhuat/basix 1.2.3 → 1.2.5

package/js/docs-nav.js

@@ -57,6 +57,7 @@ const NAV = [
             { label: 'Gallery',          href: 'components/gallery.html' },
             { label: 'Scrollbar',        href: 'components/scrollbar.html' },
             { label: 'Chat Bubbles',     href: 'components/chat-bubbles.html' },
+            { label: 'Calendar',         href: 'components/calendar.html' },
             { label: 'Charts',           href: 'components/charts.html' },
             { label: 'Group Picker',     href: 'components/group-picker.html' },
             { label: 'Virtual Dropdown', href: 'components/virtual-dropdown.html' },

package/js/timepicker.js

@@ -13,6 +13,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();
         this.startTimeInput = this.queryInput('.timespan-start');
         this.endTimeInput = this.queryInput('.timespan-end');
@@ -41,7 +43,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 +53,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.5",
   "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/*",