tiny-essentials 1.24.4 → 1.25.0

package/dist/v1/basics/html.cjs

@@ -134,8 +134,60 @@ function saveJsonFile(filename, data, spaces = 2) {
  * @property {number} [retries=0] - Number of retry attempts (ignored if signal is provided).
  * @property {Headers|Record<string, *>} [headers={}] - Additional headers.
  * @property {AbortSignal|null} [signal] - External AbortSignal; disables timeout and retries.
+ * @property {FetchOnProgressResult} [onProgress] - Track the load progress.
  */
 
+/**
+ * Callback function used to report the progress of a data download.
+ *
+ * @callback FetchOnProgressResult
+ * @param {number} loaded - The amount of bytes currently loaded.
+ * @param {number} total - The total amount of bytes to be loaded (0 if unknown).
+ * @returns {void}
+ */
+
+/**
+ * Intercepts a standard Fetch API Response to track the download progress
+ * of its body stream.
+ *
+ * This function returns a new Response object with a monitored ReadableStream,
+ * allowing the provided callback to receive updates on the number of bytes loaded.
+ *
+ * @param {Response} response - The original response object to be tracked.
+ * @param {FetchOnProgressResult} onProgress - The callback function to handle progress events.
+ * @returns {Response} A new Response object with the tracked stream.
+ */
+function trackFetchProgress(response, onProgress) {
+  if (typeof onProgress !== 'function')
+    throw new TypeError('The "onProgress" argument must be a function.');
+  if (!response.body) return response;
+
+  // Handle Progress Tracking via ReadableStream
+  const contentLength = response.headers.get('content-length');
+  const total = contentLength ? parseInt(contentLength, 10) : 0;
+  let loaded = 0;
+
+  const reader = response.body.getReader();
+  const stream = new ReadableStream({
+    async start(controller) {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        loaded += value.byteLength;
+        onProgress(loaded, total);
+        controller.enqueue(value);
+      }
+      controller.close();
+    },
+  });
+
+  return new Response(stream, {
+    headers: response.headers,
+    status: response.status,
+    statusText: response.statusText,
+  });
+}
+
 /**
  * @param {string} url - The full URL to fetch data from.
  * @param {FetchTemplateOptions} [options] - Optional settings.
@@ -144,7 +196,7 @@ function saveJsonFile(filename, data, spaces = 2) {
  */
 async function fetchTemplate(
   url,
-  { method = 'GET', body, timeout = 0, retries = 0, headers = {}, signal = null } = {},
+  { method = 'GET', body, timeout = 0, retries = 0, headers = {}, signal = null, onProgress } = {},
 ) {
   if (
     typeof url !== 'string' ||
@@ -201,7 +253,10 @@ async function fetchTemplate(
       if (timer) clearTimeout(timer);
 
       if (!response.ok) throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
-      return response;
+
+      // If onProgress is not provided or body is null, return original response
+      if (!onProgress) return response;
+      return trackFetchProgress(response, onProgress);
     } catch (err) {
       lastError = /** @type {Error} */ (err);
       if (signal) break; // if an external signal came, it does not retry
@@ -304,6 +359,98 @@ async function fetchText(url, allowedMimeTypes, options) {
 
 ///////////////////////////////////////////////////////////////////////////////
 
+/**
+ * Represents the final state and metadata of an attempted image load.
+ * @typedef {Object} ImageLoadResult
+ * @property {HTMLImageElement} element The image element instance used for loading.
+ * @property {Event} event The browser event triggered by the final lifecycle state.
+ * @property {ImageLoadStatus} status The specific outcome string of the loading process.
+ * @property {boolean} isSuccess Indicates if the image was successfully loaded without errors.
+ * @property {number} loadTimeMs The total duration in milliseconds from start to finish.
+ * @property {Object} dimensions An object containing the rendered and intrinsic sizes of the image.
+ * @property {number} dimensions.width The current layout width of the image element.
+ * @property {number} dimensions.height The current layout height of the image element.
+ * @property {number} dimensions.naturalWidth The intrinsic width of the image source in pixels.
+ * @property {number} dimensions.naturalHeight The intrinsic height of the image source in pixels.
+ */
+
+/**
+ * Describes the possible resolution states for the image loading attempt.
+ * @typedef {'loaded'|'aborted'} ImageLoadStatus
+ */
+
+/**
+ * Loads an image asynchronously, capturing critical lifecycle events.
+ * It normalizes errors and success states into a consistent result structure.
+ *
+ * @param {Object} options
+ * @param {string} options.url
+ * @param {string} [options.crossOrigin="anonymous"]
+ * @param {(event: Event, startTime: number) => void} [options.onLoading]
+ * @returns {Promise<ImageLoadResult>}
+ */
+async function loadImage({ url, onLoading, crossOrigin = 'anonymous' }) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    let startTime = performance.now();
+
+    img.crossOrigin = crossOrigin;
+
+    /**
+     * Cleans up event listeners to avoid memory leaks.
+     */
+    const cleanup = () => {
+      img.onload = null;
+      img.onerror = null;
+      img.onabort = null;
+      img.onloadstart = null;
+    };
+
+    /**
+     * Centralized handler to generate the result object.
+     * @param {Event} event
+     * @param {ImageLoadStatus} status
+     * @param {boolean} isSuccess
+     */
+    const handleResult = (event, status, isSuccess) => {
+      const endTime = performance.now();
+      cleanup();
+
+      const result = {
+        element: img,
+        isSuccess,
+        event,
+        status,
+        loadTimeMs: endTime - startTime,
+        dimensions: {
+          width: img.width,
+          height: img.height,
+          naturalWidth: img.naturalWidth,
+          naturalHeight: img.naturalHeight,
+        },
+      };
+
+      resolve(result);
+    };
+
+    // Fired when the browser starts looking for the image data.
+    // Crucial for resetting the timer to network start, not just script start.
+    img.onloadstart = (ev) => {
+      startTime = performance.now();
+      if (typeof onLoading === 'function') onLoading(ev, startTime);
+    };
+
+    img.onload = (ev) => handleResult(ev, 'loaded', true);
+    img.onabort = (ev) => handleResult(ev, 'aborted', false);
+    img.onerror = (ev) => reject(ev);
+
+    // Trigger the load
+    img.src = url;
+  });
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
 /**
  * Installs a script that toggles CSS classes on a given element
  * based on the page's visibility or focus state, and optionally
@@ -438,7 +585,9 @@ exports.fetchBlob = fetchBlob;
 exports.fetchJson = fetchJson;
 exports.fetchText = fetchText;
 exports.installWindowHiddenScript = installWindowHiddenScript;
+exports.loadImage = loadImage;
 exports.readBase64Blob = readBase64Blob;
 exports.readFileBlob = readFileBlob;
 exports.readJsonBlob = readJsonBlob;
 exports.saveJsonFile = saveJsonFile;
+exports.trackFetchProgress = trackFetchProgress;

package/dist/v1/basics/html.d.mts

@@ -45,6 +45,36 @@ export function readJsonBlob(file: File): Promise<Record<string | number | symbo
  * @param {number} [spaces=2]
  */
 export function saveJsonFile(filename: string, data: any, spaces?: number): void;
+/**
+ * @typedef {Object} FetchTemplateOptions
+ * @property {string} [method="GET"] - HTTP method to use (GET, POST, etc.).
+ * @property {any} [body] - Request body (only for methods like POST, PUT).
+ * @property {number} [timeout=0] - Timeout in milliseconds (ignored if signal is provided).
+ * @property {number} [retries=0] - Number of retry attempts (ignored if signal is provided).
+ * @property {Headers|Record<string, *>} [headers={}] - Additional headers.
+ * @property {AbortSignal|null} [signal] - External AbortSignal; disables timeout and retries.
+ * @property {FetchOnProgressResult} [onProgress] - Track the load progress.
+ */
+/**
+ * Callback function used to report the progress of a data download.
+ *
+ * @callback FetchOnProgressResult
+ * @param {number} loaded - The amount of bytes currently loaded.
+ * @param {number} total - The total amount of bytes to be loaded (0 if unknown).
+ * @returns {void}
+ */
+/**
+ * Intercepts a standard Fetch API Response to track the download progress
+ * of its body stream.
+ *
+ * This function returns a new Response object with a monitored ReadableStream,
+ * allowing the provided callback to receive updates on the number of bytes loaded.
+ *
+ * @param {Response} response - The original response object to be tracked.
+ * @param {FetchOnProgressResult} onProgress - The callback function to handle progress events.
+ * @returns {Response} A new Response object with the tracked stream.
+ */
+export function trackFetchProgress(response: Response, onProgress: FetchOnProgressResult): Response;
 /**
  * Loads and parses a JSON from a remote URL using Fetch API.
  *
@@ -74,6 +104,39 @@ export function fetchBlob(url: string, allowedMimeTypes?: string[], options?: Fe
  * @throws {Error} Throws if fetch fails, response is not ok, or MIME type is not allowed.
  */
 export function fetchText(url: string, allowedMimeTypes?: string[], options?: FetchTemplateOptions): Promise<string>;
+/**
+ * Represents the final state and metadata of an attempted image load.
+ * @typedef {Object} ImageLoadResult
+ * @property {HTMLImageElement} element The image element instance used for loading.
+ * @property {Event} event The browser event triggered by the final lifecycle state.
+ * @property {ImageLoadStatus} status The specific outcome string of the loading process.
+ * @property {boolean} isSuccess Indicates if the image was successfully loaded without errors.
+ * @property {number} loadTimeMs The total duration in milliseconds from start to finish.
+ * @property {Object} dimensions An object containing the rendered and intrinsic sizes of the image.
+ * @property {number} dimensions.width The current layout width of the image element.
+ * @property {number} dimensions.height The current layout height of the image element.
+ * @property {number} dimensions.naturalWidth The intrinsic width of the image source in pixels.
+ * @property {number} dimensions.naturalHeight The intrinsic height of the image source in pixels.
+ */
+/**
+ * Describes the possible resolution states for the image loading attempt.
+ * @typedef {'loaded'|'aborted'} ImageLoadStatus
+ */
+/**
+ * Loads an image asynchronously, capturing critical lifecycle events.
+ * It normalizes errors and success states into a consistent result structure.
+ *
+ * @param {Object} options
+ * @param {string} options.url
+ * @param {string} [options.crossOrigin="anonymous"]
+ * @param {(event: Event, startTime: number) => void} [options.onLoading]
+ * @returns {Promise<ImageLoadResult>}
+ */
+export function loadImage({ url, onLoading, crossOrigin }: {
+    url: string;
+    crossOrigin?: string | undefined;
+    onLoading?: ((event: Event, startTime: number) => void) | undefined;
+}): Promise<ImageLoadResult>;
 /**
  * Installs a script that toggles CSS classes on a given element
  * based on the page's visibility or focus state, and optionally
@@ -128,5 +191,51 @@ export type FetchTemplateOptions = {
      * - External AbortSignal; disables timeout and retries.
      */
     signal?: AbortSignal | null | undefined;
+    /**
+     * - Track the load progress.
+     */
+    onProgress?: FetchOnProgressResult | undefined;
 };
+/**
+ * Callback function used to report the progress of a data download.
+ */
+export type FetchOnProgressResult = (loaded: number, total: number) => void;
+/**
+ * Represents the final state and metadata of an attempted image load.
+ */
+export type ImageLoadResult = {
+    /**
+     * The image element instance used for loading.
+     */
+    element: HTMLImageElement;
+    /**
+     * The browser event triggered by the final lifecycle state.
+     */
+    event: Event;
+    /**
+     * The specific outcome string of the loading process.
+     */
+    status: ImageLoadStatus;
+    /**
+     * Indicates if the image was successfully loaded without errors.
+     */
+    isSuccess: boolean;
+    /**
+     * The total duration in milliseconds from start to finish.
+     */
+    loadTimeMs: number;
+    /**
+     * An object containing the rendered and intrinsic sizes of the image.
+     */
+    dimensions: {
+        width: number;
+        height: number;
+        naturalWidth: number;
+        naturalHeight: number;
+    };
+};
+/**
+ * Describes the possible resolution states for the image loading attempt.
+ */
+export type ImageLoadStatus = "loaded" | "aborted";
 //# sourceMappingURL=html.d.mts.map

package/dist/v1/basics/html.mjs

@@ -122,14 +122,63 @@ export function saveJsonFile(filename, data, spaces = 2) {
  * @property {number} [retries=0] - Number of retry attempts (ignored if signal is provided).
  * @property {Headers|Record<string, *>} [headers={}] - Additional headers.
  * @property {AbortSignal|null} [signal] - External AbortSignal; disables timeout and retries.
+ * @property {FetchOnProgressResult} [onProgress] - Track the load progress.
  */
+/**
+ * Callback function used to report the progress of a data download.
+ *
+ * @callback FetchOnProgressResult
+ * @param {number} loaded - The amount of bytes currently loaded.
+ * @param {number} total - The total amount of bytes to be loaded (0 if unknown).
+ * @returns {void}
+ */
+/**
+ * Intercepts a standard Fetch API Response to track the download progress
+ * of its body stream.
+ *
+ * This function returns a new Response object with a monitored ReadableStream,
+ * allowing the provided callback to receive updates on the number of bytes loaded.
+ *
+ * @param {Response} response - The original response object to be tracked.
+ * @param {FetchOnProgressResult} onProgress - The callback function to handle progress events.
+ * @returns {Response} A new Response object with the tracked stream.
+ */
+export function trackFetchProgress(response, onProgress) {
+    if (typeof onProgress !== 'function')
+        throw new TypeError('The "onProgress" argument must be a function.');
+    if (!response.body)
+        return response;
+    // Handle Progress Tracking via ReadableStream
+    const contentLength = response.headers.get('content-length');
+    const total = contentLength ? parseInt(contentLength, 10) : 0;
+    let loaded = 0;
+    const reader = response.body.getReader();
+    const stream = new ReadableStream({
+        async start(controller) {
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                loaded += value.byteLength;
+                onProgress(loaded, total);
+                controller.enqueue(value);
+            }
+            controller.close();
+        },
+    });
+    return new Response(stream, {
+        headers: response.headers,
+        status: response.status,
+        statusText: response.statusText,
+    });
+}
 /**
  * @param {string} url - The full URL to fetch data from.
  * @param {FetchTemplateOptions} [options] - Optional settings.
  * @returns {Promise<Response>} Result data.
  * @throws {Error} Throws if fetch fails, times out.
  */
-async function fetchTemplate(url, { method = 'GET', body, timeout = 0, retries = 0, headers = {}, signal = null } = {}) {
+async function fetchTemplate(url, { method = 'GET', body, timeout = 0, retries = 0, headers = {}, signal = null, onProgress } = {}) {
     if (typeof url !== 'string' ||
         (!url.startsWith('../') &&
             !url.startsWith('./') &&
@@ -172,7 +221,10 @@ async function fetchTemplate(url, { method = 'GET', body, timeout = 0, retries =
                 clearTimeout(timer);
             if (!response.ok)
                 throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
-            return response;
+            // If onProgress is not provided or body is null, return original response
+            if (!onProgress)
+                return response;
+            return trackFetchProgress(response, onProgress);
         }
         catch (err) {
             lastError = /** @type {Error} */ (err);
@@ -258,6 +310,87 @@ export async function fetchText(url, allowedMimeTypes, options) {
     });
 }
 ///////////////////////////////////////////////////////////////////////////////
+/**
+ * Represents the final state and metadata of an attempted image load.
+ * @typedef {Object} ImageLoadResult
+ * @property {HTMLImageElement} element The image element instance used for loading.
+ * @property {Event} event The browser event triggered by the final lifecycle state.
+ * @property {ImageLoadStatus} status The specific outcome string of the loading process.
+ * @property {boolean} isSuccess Indicates if the image was successfully loaded without errors.
+ * @property {number} loadTimeMs The total duration in milliseconds from start to finish.
+ * @property {Object} dimensions An object containing the rendered and intrinsic sizes of the image.
+ * @property {number} dimensions.width The current layout width of the image element.
+ * @property {number} dimensions.height The current layout height of the image element.
+ * @property {number} dimensions.naturalWidth The intrinsic width of the image source in pixels.
+ * @property {number} dimensions.naturalHeight The intrinsic height of the image source in pixels.
+ */
+/**
+ * Describes the possible resolution states for the image loading attempt.
+ * @typedef {'loaded'|'aborted'} ImageLoadStatus
+ */
+/**
+ * Loads an image asynchronously, capturing critical lifecycle events.
+ * It normalizes errors and success states into a consistent result structure.
+ *
+ * @param {Object} options
+ * @param {string} options.url
+ * @param {string} [options.crossOrigin="anonymous"]
+ * @param {(event: Event, startTime: number) => void} [options.onLoading]
+ * @returns {Promise<ImageLoadResult>}
+ */
+export async function loadImage({ url, onLoading, crossOrigin = 'anonymous' }) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        let startTime = performance.now();
+        img.crossOrigin = crossOrigin;
+        /**
+         * Cleans up event listeners to avoid memory leaks.
+         */
+        const cleanup = () => {
+            img.onload = null;
+            img.onerror = null;
+            img.onabort = null;
+            img.onloadstart = null;
+        };
+        /**
+         * Centralized handler to generate the result object.
+         * @param {Event} event
+         * @param {ImageLoadStatus} status
+         * @param {boolean} isSuccess
+         */
+        const handleResult = (event, status, isSuccess) => {
+            const endTime = performance.now();
+            cleanup();
+            const result = {
+                element: img,
+                isSuccess,
+                event,
+                status,
+                loadTimeMs: endTime - startTime,
+                dimensions: {
+                    width: img.width,
+                    height: img.height,
+                    naturalWidth: img.naturalWidth,
+                    naturalHeight: img.naturalHeight,
+                },
+            };
+            resolve(result);
+        };
+        // Fired when the browser starts looking for the image data.
+        // Crucial for resetting the timer to network start, not just script start.
+        img.onloadstart = (ev) => {
+            startTime = performance.now();
+            if (typeof onLoading === 'function')
+                onLoading(ev, startTime);
+        };
+        img.onload = (ev) => handleResult(ev, 'loaded', true);
+        img.onabort = (ev) => handleResult(ev, 'aborted', false);
+        img.onerror = (ev) => reject(ev);
+        // Trigger the load
+        img.src = url;
+    });
+}
+///////////////////////////////////////////////////////////////////////////////
 /**
  * Installs a script that toggles CSS classes on a given element
  * based on the page's visibility or focus state, and optionally

package/dist/v1/libs/TinyHtml/index.cjs

@@ -5,6 +5,13 @@ var TinyHtmlResetInput = require('./input/button/TinyHtmlResetInput.cjs');
 var TinyHtmlSubmitInput = require('./input/button/TinyHtmlSubmitInput.cjs');
 var TinyHtmlNumberInput = require('./input/number/TinyHtmlNumberInput.cjs');
 var TinyHtmlRangeInput = require('./input/number/TinyHtmlRangeInput.cjs');
+var TinyHtmlCheckboxInput = require('./input/check/TinyHtmlCheckboxInput.cjs');
+var TinyHtmlRadioInput = require('./input/check/TinyHtmlRadioInput.cjs');
+var TinyHtmlDateInput = require('./input/date/TinyHtmlDateInput.cjs');
+var TinyHtmlDateTimeInput = require('./input/date/TinyHtmlDateTimeInput.cjs');
+var TinyHtmlMonthInput = require('./input/date/TinyHtmlMonthInput.cjs');
+var TinyHtmlTimeInput = require('./input/date/TinyHtmlTimeInput.cjs');
+var TinyHtmlWeekInput = require('./input/date/TinyHtmlWeekInput.cjs');
 var TinyHtmlEmailInput = require('./input/text/TinyHtmlEmailInput.cjs');
 var TinyHtmlPasswordInput = require('./input/text/TinyHtmlPasswordInput.cjs');
 var TinyHtmlSearchInput = require('./input/text/TinyHtmlSearchInput.cjs');
@@ -100,11 +107,25 @@ class TinyHtmlElems {
   static SubmitInput = TinyHtmlSubmitInput;
 
   /////////////////////////////////////////////////////
+
   static NumberInput = TinyHtmlNumberInput;
   static RangerInput = TinyHtmlRangeInput;
 
   //////////////////////////////////////////////////
 
+  static CheckboxInput = TinyHtmlCheckboxInput;
+  static RadioInput = TinyHtmlRadioInput;
+
+  //////////////////////////////////////////////////
+
+  static DateInput = TinyHtmlDateInput;
+  static DateTimeInput = TinyHtmlDateTimeInput;
+  static MonthInput = TinyHtmlMonthInput;
+  static TimeInput = TinyHtmlTimeInput;
+  static WeekInput = TinyHtmlWeekInput;
+
+  //////////////////////////////////////////////////
+
   static EmailInput = TinyHtmlEmailInput;
   static PasswordInput = TinyHtmlPasswordInput;
   static SearchInput = TinyHtmlSearchInput;
@@ -163,6 +184,18 @@ export {
   TinyHtmlNumberInput,
   TinyHtmlRangeInput,
   //////////////////////////////////////////////////
+
+  TinyHtmlCheckboxInput;
+  TinyHtmlRadioInput;
+
+  //////////////////////////////////////////////////
+
+  TinyHtmlDateInput;
+  TinyHtmlDateTimeInput;
+  TinyHtmlMonthInput;
+  TinyHtmlTimeInput;
+  TinyHtmlWeekInput;
+
   TinyHtmlEmailInput,
   TinyHtmlPasswordInput,
   TinyHtmlSearchInput,

package/dist/v1/libs/TinyHtml/index.d.mts

@@ -11,6 +11,13 @@ declare class TinyHtmlElems {
     static SubmitInput: typeof TinyHtmlSubmitInput;
     static NumberInput: typeof TinyHtmlNumberInput;
     static RangerInput: typeof TinyHtmlRangeInput;
+    static CheckboxInput: typeof TinyHtmlCheckboxInput;
+    static RadioInput: typeof TinyHtmlRadioInput;
+    static DateInput: typeof TinyHtmlDateInput;
+    static DateTimeInput: typeof TinyHtmlDateTimeInput;
+    static MonthInput: typeof TinyHtmlMonthInput;
+    static TimeInput: typeof TinyHtmlTimeInput;
+    static WeekInput: typeof TinyHtmlWeekInput;
     static EmailInput: typeof TinyHtmlEmailInput;
     static PasswordInput: typeof TinyHtmlPasswordInput;
     static SearchInput: typeof TinyHtmlSearchInput;
@@ -71,6 +78,13 @@ import TinyHtmlSource from './media/TinyHtmlSource.mjs';
 import TinyHtmlButtonInput from './input/button/TinyHtmlButtonInput.mjs';
 import TinyHtmlSubmitInput from './input/button/TinyHtmlSubmitInput.mjs';
 import TinyHtmlRangeInput from './input/number/TinyHtmlRangeInput.mjs';
+import TinyHtmlCheckboxInput from './input/check/TinyHtmlCheckboxInput.mjs';
+import TinyHtmlRadioInput from './input/check/TinyHtmlRadioInput.mjs';
+import TinyHtmlDateInput from './input/date/TinyHtmlDateInput.mjs';
+import TinyHtmlDateTimeInput from './input/date/TinyHtmlDateTimeInput.mjs';
+import TinyHtmlMonthInput from './input/date/TinyHtmlMonthInput.mjs';
+import TinyHtmlTimeInput from './input/date/TinyHtmlTimeInput.mjs';
+import TinyHtmlWeekInput from './input/date/TinyHtmlWeekInput.mjs';
 import TinyHtmlEmailInput from './input/text/TinyHtmlEmailInput.mjs';
 import TinyHtmlPasswordInput from './input/text/TinyHtmlPasswordInput.mjs';
 import TinyHtmlSearchInput from './input/text/TinyHtmlSearchInput.mjs';

package/dist/v1/libs/TinyHtml/index.mjs

@@ -6,6 +6,15 @@ import TinyHtmlSubmitInput from './input/button/TinyHtmlSubmitInput.mjs';
 import TinyHtmlNumberInput from './input/number/TinyHtmlNumberInput.mjs';
 import TinyHtmlRangeInput from './input/number/TinyHtmlRangeInput.mjs';
 //////////////////////////////////////////////////
+import TinyHtmlCheckboxInput from './input/check/TinyHtmlCheckboxInput.mjs';
+import TinyHtmlRadioInput from './input/check/TinyHtmlRadioInput.mjs';
+//////////////////////////////////////////////////
+import TinyHtmlDateInput from './input/date/TinyHtmlDateInput.mjs';
+import TinyHtmlDateTimeInput from './input/date/TinyHtmlDateTimeInput.mjs';
+import TinyHtmlMonthInput from './input/date/TinyHtmlMonthInput.mjs';
+import TinyHtmlTimeInput from './input/date/TinyHtmlTimeInput.mjs';
+import TinyHtmlWeekInput from './input/date/TinyHtmlWeekInput.mjs';
+//////////////////////////////////////////////////
 import TinyHtmlEmailInput from './input/text/TinyHtmlEmailInput.mjs';
 import TinyHtmlPasswordInput from './input/text/TinyHtmlPasswordInput.mjs';
 import TinyHtmlSearchInput from './input/text/TinyHtmlSearchInput.mjs';
@@ -99,6 +108,15 @@ class TinyHtmlElems {
     static NumberInput = TinyHtmlNumberInput;
     static RangerInput = TinyHtmlRangeInput;
     //////////////////////////////////////////////////
+    static CheckboxInput = TinyHtmlCheckboxInput;
+    static RadioInput = TinyHtmlRadioInput;
+    //////////////////////////////////////////////////
+    static DateInput = TinyHtmlDateInput;
+    static DateTimeInput = TinyHtmlDateTimeInput;
+    static MonthInput = TinyHtmlMonthInput;
+    static TimeInput = TinyHtmlTimeInput;
+    static WeekInput = TinyHtmlWeekInput;
+    //////////////////////////////////////////////////
     static EmailInput = TinyHtmlEmailInput;
     static PasswordInput = TinyHtmlPasswordInput;
     static SearchInput = TinyHtmlSearchInput;
@@ -148,6 +166,18 @@ export {
   TinyHtmlNumberInput,
   TinyHtmlRangeInput,
   //////////////////////////////////////////////////
+
+  TinyHtmlCheckboxInput;
+  TinyHtmlRadioInput;
+
+  //////////////////////////////////////////////////
+
+  TinyHtmlDateInput;
+  TinyHtmlDateTimeInput;
+  TinyHtmlMonthInput;
+  TinyHtmlTimeInput;
+  TinyHtmlWeekInput;
+
   TinyHtmlEmailInput,
   TinyHtmlPasswordInput,
   TinyHtmlSearchInput,