@dodlhuat/basix 1.2.2 → 1.2.4

package/js/timepicker.js

@@ -1,11 +1,18 @@
 class TimeSpanPicker {
-    constructor(containerId, options) {
-        const element = document.getElementById(containerId);
+    constructor(elementOrSelector, options) {
+        this.handleStartChange = () => { this.handleChange(); };
+        this.handleEndChange = () => { this.handleChange(); };
+        const element = typeof elementOrSelector === 'string'
+            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
+                ? document.querySelector(elementOrSelector)
+                : document.getElementById(elementOrSelector))
+            : elementOrSelector;
         if (!element) {
-            throw new Error(`Container with id "${containerId}" not found`);
+            throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
         }
         this.container = element;
         this.onChange = options?.onChange;
+        this.uid = `tsp-${Math.random().toString(36).slice(2, 9)}`;
         this.render();
         this.startTimeInput = this.queryInput('.timespan-start');
         this.endTimeInput = this.queryInput('.timespan-end');
@@ -15,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) {
@@ -29,15 +48,13 @@ class TimeSpanPicker {
         return input;
     }
     render() {
+        const startId = `${this.uid}-start`;
+        const endId = `${this.uid}-end`;
         this.container.innerHTML = `
       <div class="timespan-picker">
         <div class="timespan-field timespan-field-start">
-          <label for="timespan-start">From</label>
-          <input
-            type="time"
-            class="timespan-start"
-            id="timespan-start"
-          />
+          <label for="${startId}">${this.fromString}</label>
+          <input type="time" class="timespan-start" id="${startId}"/>
         </div>
 
         <div class="timespan-center">
@@ -46,12 +63,8 @@ class TimeSpanPicker {
         </div>
 
         <div class="timespan-field timespan-field-end">
-          <label for="timespan-end">To</label>
-          <input
-            type="time"
-            class="timespan-end"
-            id="timespan-end"
-          />
+          <label for="${endId}">${this.toString}</label>
+          <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>
       <div class="timespan-bar" aria-hidden="true">
@@ -60,8 +73,8 @@ class TimeSpanPicker {
     `;
     }
     attachEventListeners() {
-        this.startTimeInput.addEventListener('change', () => this.handleChange());
-        this.endTimeInput.addEventListener('change', () => this.handleChange());
+        this.startTimeInput.addEventListener('change', this.handleStartChange);
+        this.endTimeInput.addEventListener('change', this.handleEndChange);
     }
     toMinutes(time) {
         const [h, m] = time.split(':').map(Number);
@@ -148,10 +161,8 @@ class TimeSpanPicker {
         return !!(start && end && start < end);
     }
     destroy() {
-        const startHandler = () => this.handleChange();
-        const endHandler = () => this.handleChange();
-        this.startTimeInput.removeEventListener('change', startHandler);
-        this.endTimeInput.removeEventListener('change', endHandler);
+        this.startTimeInput.removeEventListener('change', this.handleStartChange);
+        this.endTimeInput.removeEventListener('change', this.handleEndChange);
     }
 }
 export { TimeSpanPicker };

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 {
@@ -14,15 +16,26 @@ class TimeSpanPicker {
     private startTimeInput: HTMLInputElement;
     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'
+            ? (elementOrSelector.startsWith('#') || elementOrSelector.startsWith('.')
+                ? document.querySelector<HTMLElement>(elementOrSelector)
+                : document.getElementById(elementOrSelector))
+            : elementOrSelector;
 
-    constructor(containerId: string, options?: TimeSpanPickerOptions) {
-        const element = document.getElementById(containerId);
         if (!element) {
-            throw new Error(`Container with id "${containerId}" not found`);
+            throw new Error(`TimeSpanPicker: Element not found for "${elementOrSelector}"`);
         }
 
         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();
 
@@ -53,15 +66,13 @@ class TimeSpanPicker {
     }
 
     private render(): void {
+        const startId = `${this.uid}-start`;
+        const endId = `${this.uid}-end`;
         this.container.innerHTML = `
       <div class="timespan-picker">
         <div class="timespan-field timespan-field-start">
-          <label for="timespan-start">From</label>
-          <input
-            type="time"
-            class="timespan-start"
-            id="timespan-start"
-          />
+          <label for="${startId}">${this.fromString}</label>
+          <input type="time" class="timespan-start" id="${startId}"/>
         </div>
 
         <div class="timespan-center">
@@ -70,12 +81,8 @@ class TimeSpanPicker {
         </div>
 
         <div class="timespan-field timespan-field-end">
-          <label for="timespan-end">To</label>
-          <input
-            type="time"
-            class="timespan-end"
-            id="timespan-end"
-          />
+          <label for="${endId}">${this.toString}</label>
+          <input type="time" class="timespan-end" id="${endId}"/>
         </div>
       </div>
       <div class="timespan-bar" aria-hidden="true">
@@ -84,9 +91,12 @@ class TimeSpanPicker {
     `;
     }
 
+    private readonly handleStartChange = (): void => { this.handleChange(); };
+    private readonly handleEndChange = (): void => { this.handleChange(); };
+
     private attachEventListeners(): void {
-        this.startTimeInput.addEventListener('change', () => this.handleChange());
-        this.endTimeInput.addEventListener('change', () => this.handleChange());
+        this.startTimeInput.addEventListener('change', this.handleStartChange);
+        this.endTimeInput.addEventListener('change', this.handleEndChange);
     }
 
     private toMinutes(time: string): number {
@@ -183,10 +193,8 @@ class TimeSpanPicker {
     }
 
     public destroy(): void {
-        const startHandler = () => this.handleChange();
-        const endHandler = () => this.handleChange();
-        this.startTimeInput.removeEventListener('change', startHandler);
-        this.endTimeInput.removeEventListener('change', endHandler);
+        this.startTimeInput.removeEventListener('change', this.handleStartChange);
+        this.endTimeInput.removeEventListener('change', this.handleEndChange);
     }
 }
 

package/js/toast.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class Toast {
     constructor(contentOrOptions, header = '', type, closeable = true) {
         this.closureIcon = '<div class="icon icon-close close"></div>';
@@ -79,15 +80,10 @@ class Toast {
             parts.push(this.closureIcon);
         }
         if (this.header) {
-            parts.push(`<div class="header">${this.escapeHtml(this.header)}</div>`);
+            parts.push(`<div class="header">${escapeHtml(this.header)}</div>`);
         }
-        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
+        parts.push(`<div class="content">${escapeHtml(this.content)}</div>`);
         return parts.join('');
     }
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
 }
 export { Toast };

package/js/toast.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 type ToastType = 'success' | 'error' | 'warning' | 'info';
 
 interface ToastOptions {
@@ -119,19 +121,13 @@ class Toast {
         }
 
         if (this.header) {
-            parts.push(`<div class="header">${this.escapeHtml(this.header)}</div>`);
+            parts.push(`<div class="header">${escapeHtml(this.header)}</div>`);
         }
 
-        parts.push(`<div class="content">${this.escapeHtml(this.content)}</div>`);
+        parts.push(`<div class="content">${escapeHtml(this.content)}</div>`);
 
         return parts.join('');
     }
-
-    private escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
 }
 
 export { Toast };

package/js/tooltip.js

@@ -23,7 +23,8 @@ class Tooltip {
             position: options.position ?? 'auto',
             offset: options.offset ?? 8,
             delay: options.delay ?? 0,
-            className: options.className ?? ''
+            className: options.className ?? '',
+            isHtml: options.isHtml ?? false,
         };
         this.attachEvents();
     }
@@ -34,7 +35,7 @@ class Tooltip {
             const position = trigger.getAttribute('data-tooltip-position') ?? 'auto';
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
             if (content) {
-                new Tooltip(trigger, content, { position, className });
+                new Tooltip(trigger, content, { position, className, isHtml: false });
             }
         });
         // Also support content from separate elements
@@ -47,7 +48,7 @@ class Tooltip {
                 const contentElement = document.getElementById(contentId);
                 if (contentElement) {
                     const content = contentElement.innerHTML;
-                    new Tooltip(trigger, content, { position, className });
+                    new Tooltip(trigger, content, { position, className, isHtml: true });
                 }
             }
         });
@@ -94,7 +95,15 @@ class Tooltip {
         tooltip.className = 'tooltip';
         tooltip.id = `tooltip-${++Tooltip.idCounter}`;
         tooltip.setAttribute('role', 'tooltip');
-        tooltip.innerHTML = `<div class="tooltip-content">${this.content}</div>`;
+        const tooltipContent = document.createElement('div');
+        tooltipContent.className = 'tooltip-content';
+        if (this.options.isHtml) {
+            tooltipContent.innerHTML = this.content;
+        }
+        else {
+            tooltipContent.textContent = this.content;
+        }
+        tooltip.appendChild(tooltipContent);
         if (this.options.className) {
             tooltip.classList.add(this.options.className);
         }

package/js/tooltip.ts

@@ -7,6 +7,9 @@ interface TooltipOptions {
     offset?: number;
     delay?: number;
     className?: string;
+    /** Set to true when content is trusted HTML (e.g. from data-tooltip-id).
+     *  Defaults to false — content is treated as plain text and escaped. */
+    isHtml?: boolean;
 }
 
 class Tooltip {
@@ -27,7 +30,8 @@ class Tooltip {
             position: options.position ?? 'auto',
             offset: options.offset ?? 8,
             delay: options.delay ?? 0,
-            className: options.className ?? ''
+            className: options.className ?? '',
+            isHtml: options.isHtml ?? false,
         };
 
         this.attachEvents();
@@ -41,7 +45,7 @@ class Tooltip {
             const className = trigger.getAttribute('data-tooltip-class') ?? '';
 
             if (content) {
-                new Tooltip(trigger, content, { position, className });
+                new Tooltip(trigger, content, { position, className, isHtml: false });
             }
         });
 
@@ -56,7 +60,7 @@ class Tooltip {
                 const contentElement = document.getElementById(contentId);
                 if (contentElement) {
                     const content = contentElement.innerHTML;
-                    new Tooltip(trigger, content, { position, className });
+                    new Tooltip(trigger, content, { position, className, isHtml: true });
                 }
             }
         });
@@ -113,7 +117,15 @@ class Tooltip {
         tooltip.className = 'tooltip';
         tooltip.id = `tooltip-${++Tooltip.idCounter}`;
         tooltip.setAttribute('role', 'tooltip');
-        tooltip.innerHTML = `<div class="tooltip-content">${this.content}</div>`;
+
+        const tooltipContent = document.createElement('div');
+        tooltipContent.className = 'tooltip-content';
+        if (this.options.isHtml) {
+            tooltipContent.innerHTML = this.content;
+        } else {
+            tooltipContent.textContent = this.content;
+        }
+        tooltip.appendChild(tooltipContent);
 
         if (this.options.className) {
             tooltip.classList.add(this.options.className);

package/js/tree.js

@@ -168,6 +168,10 @@ class TreeComponent {
             }
         });
     }
+    destroy() {
+        this.container.innerHTML = '';
+        this.selectedNode = null;
+    }
     getSelectedNode() {
         return this.selectedNode;
     }

package/js/tree.ts

@@ -215,6 +215,11 @@ class TreeComponent {
     });
   }
 
+  public destroy(): void {
+    this.container.innerHTML = '';
+    this.selectedNode = null;
+  }
+
   public getSelectedNode(): TreeNode | null {
     return this.selectedNode;
   }

package/js/utils.js

@@ -66,4 +66,32 @@ const utils = {
         return element.offsetParent === null;
     }
 };
-export { utils };
+/**
+ * Escape a plain-text string so it is safe to inject into innerHTML.
+ * Use this whenever inserting user-controlled strings into HTML templates.
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+/**
+ * Sanitize an HTML string by removing dangerous elements and attributes
+ * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
+ * Use this when a component intentionally accepts rich HTML from callers.
+ */
+function sanitizeHtml(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
+    doc.querySelectorAll('*').forEach(el => {
+        for (const attr of Array.from(el.attributes)) {
+            if (attr.name.startsWith('on') ||
+                attr.value.trim().toLowerCase().startsWith('javascript:')) {
+                el.removeAttribute(attr.name);
+            }
+        }
+    });
+    return doc.body.innerHTML;
+}
+export { utils, escapeHtml, sanitizeHtml };

package/js/utils.ts

@@ -81,4 +81,39 @@ const utils: Utils = {
     }
 };
 
-export { utils };
+/**
+ * Escape a plain-text string so it is safe to inject into innerHTML.
+ * Use this whenever inserting user-controlled strings into HTML templates.
+ */
+function escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+/**
+ * Sanitize an HTML string by removing dangerous elements and attributes
+ * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
+ * Use this when a component intentionally accepts rich HTML from callers.
+ */
+function sanitizeHtml(html: string): string {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
+
+    doc.querySelectorAll('*').forEach(el => {
+        for (const attr of Array.from(el.attributes)) {
+            if (
+                attr.name.startsWith('on') ||
+                attr.value.trim().toLowerCase().startsWith('javascript:')
+            ) {
+                el.removeAttribute(attr.name);
+            }
+        }
+    });
+
+    return doc.body.innerHTML;
+}
+
+export { utils, escapeHtml, sanitizeHtml };

package/js/virtual-dropdown.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class VirtualDropdown {
     constructor(config) {
         const containerElement = typeof config.container === 'string'
@@ -30,7 +31,7 @@ class VirtualDropdown {
     renderBase() {
         this.container.innerHTML = `
       <div class="dropdown-trigger" tabindex="0" role="button" aria-haspopup="listbox" aria-expanded="false">
-        <span class="trigger-text">${this.escapeHtml(this.placeholder)}</span>
+        <span class="trigger-text">${escapeHtml(this.placeholder)}</span>
         <span class="trigger-arrow" aria-hidden="true">▼</span>
       </div>
       <div class="dropdown-menu" role="listbox">
@@ -146,14 +147,14 @@ class VirtualDropdown {
             const isSelected = this.selectedValues.has(opt.value);
             return `
           <div class="dropdown-item ${isSelected ? 'selected' : ''}"
-               data-value="${this.escapeHtml(String(opt.value))}"
+               data-value="${escapeHtml(String(opt.value))}"
                data-idx="${realIdx}"
                role="option"
                aria-selected="${isSelected}"
                tabindex="0"
                style="height: ${this.itemHeight}px; line-height: ${this.itemHeight}px;">
             ${this.multiSelect ? `<input type="checkbox" ${isSelected ? 'checked' : ''} tabindex="-1" aria-hidden="true">` : ''}
-            <span class="item-label">${this.escapeHtml(opt.label)}</span>
+            <span class="item-label">${escapeHtml(opt.label)}</span>
           </div>
         `;
         })
@@ -221,11 +222,6 @@ class VirtualDropdown {
             }
         }
     }
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
     getValue() {
         return Array.from(this.selectedValues);
     }

package/js/virtual-dropdown.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 interface DropdownOption {
     label: string;
     value: string | number;
@@ -77,7 +79,7 @@ class VirtualDropdown {
     private renderBase(): void {
         this.container.innerHTML = `
       <div class="dropdown-trigger" tabindex="0" role="button" aria-haspopup="listbox" aria-expanded="false">
-        <span class="trigger-text">${this.escapeHtml(this.placeholder)}</span>
+        <span class="trigger-text">${escapeHtml(this.placeholder)}</span>
         <span class="trigger-arrow" aria-hidden="true">▼</span>
       </div>
       <div class="dropdown-menu" role="listbox">
@@ -215,14 +217,14 @@ class VirtualDropdown {
                 const isSelected = this.selectedValues.has(opt.value);
                 return `
           <div class="dropdown-item ${isSelected ? 'selected' : ''}"
-               data-value="${this.escapeHtml(String(opt.value))}"
+               data-value="${escapeHtml(String(opt.value))}"
                data-idx="${realIdx}"
                role="option"
                aria-selected="${isSelected}"
                tabindex="0"
                style="height: ${this.itemHeight}px; line-height: ${this.itemHeight}px;">
             ${this.multiSelect ? `<input type="checkbox" ${isSelected ? 'checked' : ''} tabindex="-1" aria-hidden="true">` : ''}
-            <span class="item-label">${this.escapeHtml(opt.label)}</span>
+            <span class="item-label">${escapeHtml(opt.label)}</span>
           </div>
         `;
             })
@@ -299,12 +301,6 @@ class VirtualDropdown {
         }
     }
 
-    private escapeHtml(text: string): string {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
     public getValue(): Array<string | number> {
         return Array.from(this.selectedValues);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.2.2",
+  "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/*",