bootstrap5-toggle 5.1.3 → 5.2.0-rc1

package/js/bootstrap5-toggle.ecmas.js

@@ -1,5 +1,5 @@
 /* Copyright Notice
- * bootstrap5-toggle v5.1.3
+ * bootstrap5-toggle v5.2.0-rc1
  * https://palcarazm.github.io/bootstrap5-toggle/
  * @author 2011-2014 Min Hur (https://github.com/minhur)
  * @author 2018-2019 Brent Ely (https://github.com/gitbrent)
@@ -10,527 +10,993 @@
  * @see https://github.com/palcarazm/bootstrap5-toggle/blob/master/LICENSE
  */
 
+(function (factory) {
+    typeof define === 'function' && define.amd ? define(factory) :
+    factory();
+})((function () { 'use strict';
 
-"use strict";
-function sanitize(text) {
-  if (!text) return text; // handle null or undefined
-  var map = {
-    "&": "&",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#39;",
-    "/": "&#x2F;",
-  };
-  return text.replace(/[&<>"'/]/g, function (m) {
-    return map[m];
-  });
-}
-
-(function () {
-  /**
-   * `Toggle` is instantiated for each toggle-button
-   */
-  class Toggle {
-    constructor(element, options) {
-      const DEPRECATION = {
-        value:
-          "BOOTSTRAP TOGGLE DEPRECATION CHECK -- a0Jhux0QySypjjs4tLtEo8xT2kx0AbYaq9K6mgNjWSs0HF0L8T8J0M0o3Kr7zkm7 --",
-        ATTRIBUTE: "attribute",
-        OPTION: "option",
-        log: function (type, oldlabel, newlabel) {
-          console.warn(
-            `Bootstrap Toggle deprecation warning: Using ${oldlabel} ${type} is deprecated. Use ${newlabel} instead.`
-          );
-        },
-      };
-      const DEFAULTS = {
-        onlabel: "On",
-        onstyle: "primary",
-        onvalue: null,
-        ontitle: null,
-        offlabel: "Off",
-        offstyle: "secondary",
-        offvalue: null,
-        offtitle: null,
-        size: "",
-        style: "",
-        width: null,
-        height: null,
-        tabindex: 0,
-        tristate: false,
-        name: null,
-      };
-      options = options || {};
-
-      // A: Capture ref to HMTL element
-      this.element = element;
-
-      // B: Set options
-      this.options = {
-        onlabel:
-          this.element.getAttribute("data-onlabel") ||
-          options.onlabel ||
-          DEPRECATION.value ||
-          DEFAULTS.onlabel,
-        onstyle:
-          sanitize(this.element.getAttribute("data-onstyle")) ||
-          options.onstyle ||
-          DEFAULTS.onstyle,
-        onvalue:
-          sanitize(this.element.getAttribute("value")) ||
-          sanitize(this.element.getAttribute("data-onvalue")) ||
-          options.onvalue ||
-          DEFAULTS.onvalue,
-        ontitle:
-          sanitize(this.element.getAttribute("data-ontitle")) ||
-          options.ontitle ||
-          sanitize(this.element.getAttribute("title")) ||
-          DEFAULTS.ontitle,
-        offlabel:
-          this.element.getAttribute("data-offlabel") ||
-          options.offlabel ||
-          DEPRECATION.value ||
-          DEFAULTS.offlabel,
-        offstyle:
-          sanitize(this.element.getAttribute("data-offstyle")) ||
-          options.offstyle ||
-          DEFAULTS.offstyle,
-        offvalue:
-          sanitize(this.element.getAttribute("data-offvalue")) ||
-          options.offvalue ||
-          DEFAULTS.offvalue,
-        offtitle:
-          sanitize(this.element.getAttribute("data-offtitle")) ||
-          options.offtitle ||
-          sanitize(this.element.getAttribute("title")) ||
-          DEFAULTS.offtitle,
-        size:
-          sanitize(this.element.getAttribute("data-size")) ||
-          options.size ||
-          DEFAULTS.size,
-        style:
-          sanitize(this.element.getAttribute("data-style")) ||
-          options.style ||
-          DEFAULTS.style,
-        width:
-          sanitize(this.element.getAttribute("data-width")) ||
-          options.width ||
-          DEFAULTS.width,
-        height:
-          sanitize(this.element.getAttribute("data-height")) ||
-          options.height ||
-          DEFAULTS.height,
-        tabindex:
-          sanitize(this.element.getAttribute("tabindex")) ||
-          options.tabindex ||
-          DEFAULTS.tabindex,
-        tristate:
-          this.element.hasAttribute("tristate") ||
-          options.tristate ||
-          DEFAULTS.tristate,
-        name:
-          sanitize(this.element.getAttribute("name")) ||
-          options.name ||
-          DEFAULTS.name,
-      };
-
-      // C: Check deprecations
-      if (this.options.onlabel === DEPRECATION.value) {
-        if (sanitize(this.element.getAttribute("data-on"))) {
-          DEPRECATION.log(DEPRECATION.ATTRIBUTE, "data-on", "data-onlabel");
-          this.options.onlabel = this.element.getAttribute("data-on");
-        } else if (options.on) {
-          DEPRECATION.log(DEPRECATION.OPTION, "on", "onlabel");
-          this.options.onlabel = options.on;
-        } else {
-          this.options.onlabel = DEFAULTS.onlabel;
-        }
-      }
-      if (this.options.offlabel === DEPRECATION.value) {
-        if (sanitize(this.element.getAttribute("data-off"))) {
-          DEPRECATION.log(DEPRECATION.ATTRIBUTE, "data-off", "data-offlabel");
-          this.options.offlabel = this.element.getAttribute("data-off");
-        } else if (options.off) {
-          DEPRECATION.log(DEPRECATION.OPTION, "off", "offlabel");
-          this.options.offlabel = options.off;
-        } else {
-          this.options.offlabel = DEFAULTS.offlabel;
-        }
-      }
-
-      // LAST: Render Toggle
-      this.render();
-    }
-    render() {
-      function calcH(el) {
-        const styles = window.getComputedStyle(el);
-        const height = el.offsetHeight;
-        const borderTopWidth = parseFloat(styles.borderTopWidth);
-        const borderBottomWidth = parseFloat(styles.borderBottomWidth);
-        const paddingTop = parseFloat(styles.paddingTop);
-        const paddingBottom = parseFloat(styles.paddingBottom);
-
-        return (
-          height -
-          borderBottomWidth -
-          borderTopWidth -
-          paddingTop -
-          paddingBottom
-        );
-      }
-      // 0: Parse size
-      let size;
-      switch (this.options.size) {
-        case "large":
-        case "lg":
-          size = "btn-lg";
-          break;
-        case "small":
-        case "sm":
-          size = "btn-sm";
-          break;
-        case "mini":
-        case "xs":
-          size = "btn-xs";
-          break;
-        default:
-          size = "";
-          break;
-      }
-
-      // 1: On
-      let ecmasToggleOn = document.createElement("span");
-      ecmasToggleOn.setAttribute(
-        "class",
-        "btn btn-" + this.options.onstyle + " " + size
-      );
-      ecmasToggleOn.innerHTML = this.options.onlabel;
-      if (this.options.ontitle) {
-        ecmasToggleOn.setAttribute("title", this.options.ontitle);
-      }
-
-      // 2: Off
-      let ecmasToggleOff = document.createElement("span");
-      ecmasToggleOff.setAttribute(
-        "class",
-        "btn btn-" + this.options.offstyle + " " + size
-      );
-      ecmasToggleOff.innerHTML = this.options.offlabel;
-      if (this.options.offtitle) {
-        ecmasToggleOff.setAttribute("title", this.options.offtitle);
-      }
-
-      // 3: Handle
-      let ecmasToggleHandle = document.createElement("span");
-      ecmasToggleHandle.setAttribute("class", "toggle-handle btn " + size);
-
-      // 4: Toggle Group
-      let ecmasToggleGroup = document.createElement("div");
-      ecmasToggleGroup.setAttribute("class", "toggle-group");
-      ecmasToggleGroup.appendChild(ecmasToggleOn);
-      ecmasToggleGroup.appendChild(ecmasToggleOff);
-      ecmasToggleGroup.appendChild(ecmasToggleHandle);
-
-      // 5: Render Toggle
-      let ecmasToggle = document.createElement("div");
-      ecmasToggle.setAttribute("class", "toggle btn");
-      ecmasToggle.classList.add(
-        this.element.checked
-          ? "btn-" + this.options.onstyle
-          : "btn-" + this.options.offstyle
-      );
-      ecmasToggle.setAttribute("tabindex", this.options.tabindex);
-      if (!this.element.checked) ecmasToggle.classList.add("off");
-      if (this.options.size) ecmasToggle.classList.add(size);
-      if (this.options.style) {
-        this.options.style.split(" ").forEach((style) => {
-          ecmasToggle.classList.add(style);
-        });
-      }
-      if (this.element.disabled || this.element.readOnly) {
-        ecmasToggle.classList.add("disabled");
-        ecmasToggle.setAttribute("disabled", "disabled");
-      }
-
-      // 6: Set form values
-      if (this.options.onvalue)
-        this.element.setAttribute("value", this.options.onvalue);
-      let invElement = null;
-      if (this.options.offvalue) {
-        invElement = this.element.cloneNode();
-        invElement.setAttribute("value", this.options.offvalue);
-        invElement.setAttribute("data-toggle", "invert-toggle");
-        invElement.removeAttribute("id");
-        invElement.checked = !this.element.checked;
-      }
-
-      // 7: Replace HTML checkbox with Toggle-Button
-      this.element.parentElement.insertBefore(ecmasToggle, this.element);
-      ecmasToggle.appendChild(this.element);
-      if (invElement) ecmasToggle.appendChild(invElement);
-      ecmasToggle.appendChild(ecmasToggleGroup);
-
-      // 8: Set button W/H, lineHeight
-      {
-        // A: Set style W/H
-        // NOTE: `offsetWidth` returns *rounded* integer values, so use `getBoundingClientRect` instead.
-        if (this.options.width) {
-          ecmasToggle.style.width = `${this.options.width}px`;
-        } else {
-          ecmasToggle.style["min-width"] = "100px"; // First approach for better calculation
-          ecmasToggle.style["min-width"] = `${
-            Math.max(
-              ecmasToggleOn.getBoundingClientRect().width,
-              ecmasToggleOff.getBoundingClientRect().width
-            ) +
-            ecmasToggleHandle.getBoundingClientRect().width / 2
-          }px`;
-        }
-
-        if (this.options.height) {
-          ecmasToggle.style.height = `${this.options.height}px`;
-        } else {
-          ecmasToggle.style["min-height"] = "36px"; // First approach for better calculation
-          ecmasToggle.style["min-height"] = `${Math.max(
-            ecmasToggleOn.getBoundingClientRect().height,
-            ecmasToggleOff.getBoundingClientRect().height
-          )}px`;
-        }
-
-        // B: Apply on/off class
-        ecmasToggleOn.classList.add("toggle-on");
-        ecmasToggleOff.classList.add("toggle-off");
-
-        // C: Finally, set lineHeight if needed
-        if (this.options.height) {
-          ecmasToggleOn.style.lineHeight = calcH(ecmasToggleOn) + "px";
-          ecmasToggleOff.style.lineHeight = calcH(ecmasToggleOff) + "px";
-        }
-      }
-
-      // 9: Add listeners
-      ecmasToggle.addEventListener(
-        "pointerdown",
-        (e) => {
-          this.#toggleActionPerformed(e);
-        },
-        { passive: true }
-      );
-      ecmasToggle.addEventListener(
-        "keypress",
-        (e) => {
-          if (e.key == " ") {
-            this.#toggleActionPerformed(e);
-          }
-        },
-        { passive: true }
-      );
-
-      if (this.element.id) {
-        document
-          .querySelectorAll('label[for="' + this.element.id + '"]')
-          .forEach((label) => {
-            label.addEventListener(
-              "pointerdown",
-              (e) => {
-                e.preventDefault();
-                this.toggle();
-                ecmasToggle.focus();
-              },
-              { passive: true }
-            );
-          });
-      }
-
-      // 10: Set elements to bootstrap object
-      this.ecmasToggle = ecmasToggle;
-      this.invElement = invElement;
-
-      // 11: Handle indeterminate state
-      if(this.options.tristate && this.element.indeterminate) {
-        this.indeterminate(true);
-      }
-
-      // 12: Keep reference to this instance for subsequent calls via `getElementById().bootstrapToggle()`
-      this.element.bsToggle = this;
-    }
-
-    /**
-     * Trigger actions
-     * @param {Event} e event
-     */
-    #toggleActionPerformed(e) {
-      if (this.options.tristate) {
-        if (this.ecmasToggle.classList.contains("indeterminate")) {
-          this.determinate(true);
-          this.toggle();
-        } else {
-          this.indeterminate();
-        }
-      } else {
-        this.toggle();
-      }
-    }
-
-    toggle(silent = false) {
-      if (this.element.checked) this.off(silent);
-      else this.on(silent);
-    }
-
-    on(silent = false) {
-      if (this.element.disabled || this.element.readOnly) return false;
-      this.ecmasToggle.classList.remove("btn-" + this.options.offstyle);
-      this.ecmasToggle.classList.add("btn-" + this.options.onstyle);
-      this.ecmasToggle.classList.remove("off");
-      this.element.checked = true;
-      if (this.invElement) this.invElement.checked = false;
-      if (!silent) this.trigger();
-    }
-
-    off(silent = false) {
-      if (this.element.disabled || this.element.readOnly) return false;
-      this.ecmasToggle.classList.remove("btn-" + this.options.onstyle);
-      this.ecmasToggle.classList.add("btn-" + this.options.offstyle);
-      this.ecmasToggle.classList.add("off");
-      this.element.checked = false;
-      if (this.invElement) this.invElement.checked = true;
-      if (!silent) this.trigger();
-    }
-
-    indeterminate(silent = false) {
-      if (
-        !this.options.tristate ||
-        this.element.disabled ||
-        this.element.readOnly
-      )
-        return false;
-      this.ecmasToggle.classList.add("indeterminate");
-      this.element.indeterminate = true;
-      this.element.removeAttribute("name");
-      if (this.invElement) this.invElement.indeterminate = true;
-      if (this.invElement) this.invElement.removeAttribute("name");
-      if (!silent) this.trigger();
-    }
-
-    determinate(silent = false) {
-      if (
-        !this.options.tristate ||
-        this.element.disabled ||
-        this.element.readOnly
-      )
-        return false;
-      this.ecmasToggle.classList.remove("indeterminate");
-      this.element.indeterminate = false;
-      if (this.options.name)
-        this.element.setAttribute("name", this.options.name);
-      if (this.invElement) this.invElement.indeterminate = false;
-      if (this.invElement && this.options.name)
-        this.invElement.setAttribute("name", this.options.name);
-      if (!silent) this.trigger();
-    }
-
-    enable() {
-      this.ecmasToggle.classList.remove("disabled");
-      this.ecmasToggle.removeAttribute("disabled");
-      this.element.removeAttribute("disabled");
-      this.element.removeAttribute("readonly");
-      if (this.invElement) {
-        this.invElement.removeAttribute("disabled");
-        this.invElement.removeAttribute("readonly");
-      }
-    }
-
-    disable() {
-      this.ecmasToggle.classList.add("disabled");
-      this.ecmasToggle.setAttribute("disabled", "");
-      this.element.setAttribute("disabled", "");
-      this.element.removeAttribute("readonly");
-      if (this.invElement) {
-        this.invElement.setAttribute("disabled", "");
-        this.invElement.removeAttribute("readonly");
-      }
-    }
-
-    readonly() {
-      this.ecmasToggle.classList.add("disabled");
-      this.ecmasToggle.setAttribute("disabled", "");
-      this.element.removeAttribute("disabled");
-      this.element.setAttribute("readonly", "");
-      if (this.invElement) {
-        this.invElement.removeAttribute("disabled");
-        this.invElement.setAttribute("readonly", "");
-      }
-    }
-
-    update(silent) {
-      if (this.element.disabled) this.disable();
-      else if (this.element.readOnly) this.readonly();
-      else this.enable();
-      if (this.element.checked) this.on(silent);
-      else this.off(silent);
-    }
-
-    trigger(silent) {
-      if (!silent)
-        this.element.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-
-    destroy() {
-      // A: Remove button-group from UI, replace checkbox element
-      this.ecmasToggle.parentNode.insertBefore(this.element, this.ecmasToggle);
-      this.ecmasToggle.parentNode.removeChild(this.ecmasToggle);
-
-      // B: Delete internal refs
-      delete this.element.bsToggle;
-      delete this.ecmasToggle;
-    }
-
-    rerender() {
-      this.destroy();
-      this.element.bootstrapToggle();
-    }
-  }
-
-  /**
-   * Add `bootstrapToggle` prototype function to HTML Elements
-   * Enables execution when used with HTML - ex: `document.getElementById('toggle').bootstrapToggle('on')`
-   */
-  Element.prototype.bootstrapToggle = function (options, silent) {
-    let _bsToggle = this.bsToggle || new Toggle(this, options);
-
-    // Execute method calls
-    if (options && typeof options === "string") {
-      if (options.toLowerCase() == "toggle") _bsToggle.toggle(silent);
-      else if (options.toLowerCase() == "on") _bsToggle.on(silent);
-      else if (options.toLowerCase() == "off") _bsToggle.off(silent);
-      else if (options.toLowerCase() == "indeterminate")
-        _bsToggle.indeterminate(silent);
-      else if (options.toLowerCase() == "determinate")
-        _bsToggle.determinate(silent);
-      else if (options.toLowerCase() == "enable") _bsToggle.enable();
-      else if (options.toLowerCase() == "disable") _bsToggle.disable();
-      else if (options.toLowerCase() == "readonly") _bsToggle.readonly();
-      else if (options.toLowerCase() == "destroy") _bsToggle.destroy();
-      else if (options.toLowerCase() == "rerender") _bsToggle.rerender();
-    }
-  };
-
-  /**
-   * Replace all `input[type=checkbox][data-toggle="toggle"]` inputs with "Bootstrap-Toggle"
-   * Executes once page elements have rendered enabling script to be placed in `<head>`
-   */
-  if (typeof window !== "undefined")
-    window.onload = function () {
-      document
-        .querySelectorAll('input[type=checkbox][data-toggle="toggle"]')
-        .forEach(function (ele) {
-          ele.bootstrapToggle();
-        });
-    };
-
-  // Export library if possible
-  if (typeof module !== "undefined" && module.exports) {
-    module.exports = Toggle;
-  }
-})();
+    var ToggleStateValue;
+    (function (ToggleStateValue) {
+        ToggleStateValue["ON"] = "on";
+        ToggleStateValue["OFF"] = "off";
+        ToggleStateValue["INDETERMINATE"] = "indeterminate";
+    })(ToggleStateValue || (ToggleStateValue = {}));
+    var ToggleStateStatus;
+    (function (ToggleStateStatus) {
+        ToggleStateStatus["ENABLED"] = "enabled";
+        ToggleStateStatus["DISABLED"] = "disabled";
+        ToggleStateStatus["READONLY"] = "readonly";
+    })(ToggleStateStatus || (ToggleStateStatus = {}));
+    var ToggleActionType;
+    (function (ToggleActionType) {
+        ToggleActionType["NEXT"] = "next";
+        ToggleActionType["ON"] = "on";
+        ToggleActionType["OFF"] = "off";
+        ToggleActionType["TOGGLE"] = "toggle";
+        ToggleActionType["DETERMINATE"] = "determinate";
+        ToggleActionType["INDETERMINATE"] = "indeterminate";
+        ToggleActionType["READONLY"] = "readonly";
+        ToggleActionType["DISABLE"] = "disable";
+        ToggleActionType["ENABLE"] = "enable";
+    })(ToggleActionType || (ToggleActionType = {}));
+
+    var DOMBuilder = /** @class */ (function () {
+        /**
+         * Initializes a new instance of the DOMBuilder class.
+         * @param checkbox HTMLInputElement element representing the toggle.
+         * @param options ToggleOptions object containing options for the toggle.
+         * @param state ToggleState object containing the initial state of the toggle.
+         */
+        function DOMBuilder(checkbox, options, state) {
+            this.onStyle = "btn-".concat(options.onstyle);
+            this.offStyle = "btn-".concat(options.offstyle);
+            this.name = options.name;
+            this.checkbox = checkbox;
+            if (options.onvalue)
+                this.checkbox.value = options.onvalue;
+            this.invCheckbox = options.offvalue
+                ? this.createInvCheckbox(options.offvalue)
+                : null;
+            this.sizeClass = DOMBuilder.sizeResolver(options.size);
+            this.toggleOn = this.createToggleSpan(options.onlabel, this.onStyle, options.ontitle);
+            this.toggleOff = this.createToggleSpan(options.offlabel, this.offStyle, options.offtitle);
+            this.toggleHandle = this.createToggleHandle();
+            this.toggleGroup = this.createToggleGroup();
+            this.toggle = document.createElement("div");
+            this.renderToggle(options);
+            this.render(state);
+        }
+        /**
+         * Resolves the size class for the toggle based on the provided size.
+         * If size is not provided or is invalid, returns an empty string.
+         * @param size ToggleSize value representing the size of the toggle.
+         * @returns string representing the size class for the toggle.
+         */
+        DOMBuilder.sizeResolver = function (size) {
+            var _a;
+            var sizeMap = {
+                large: "btn-lg",
+                lg: "btn-lg",
+                small: "btn-sm",
+                sm: "btn-sm",
+                mini: "btn-xs",
+                xs: "btn-xs",
+            };
+            return (_a = sizeMap[size]) !== null && _a !== void 0 ? _a : "";
+        };
+        /**
+         * Creates an inverted checkbox element that is used in the toggle.
+         * This checkbox is used to create the toggle's "off" state.
+         * @param offValue The value of the checkbox when the toggle is in the "off" state.
+         * @returns An HTMLInputElement representing the inverted checkbox element.
+         */
+        DOMBuilder.prototype.createInvCheckbox = function (offValue) {
+            var invCheckbox = this.checkbox.cloneNode(true);
+            invCheckbox.value = offValue;
+            invCheckbox.setAttribute("data-toggle", "invert-toggle");
+            invCheckbox.removeAttribute("id");
+            return invCheckbox;
+        };
+        /**
+         * Renders the toggle element and its children.
+         * Sets the class attribute of the toggle with the provided style and size class.
+         * Sets the tabindex attribute of the toggle with the provided tabindex.
+         * Inserts the toggle element before the original checkbox element.
+         * Appends the checkbox, inverted checkbox (if exists) and toggle group elements to the toggle element.
+         * Handles the toggle size by setting the width and height attributes of the toggle element.
+         * @param options - ToggleOptions object containing the style, width, height and tabindex for the toggle.
+         */
+        DOMBuilder.prototype.renderToggle = function (_a) {
+            var _b;
+            var style = _a.style, width = _a.width, height = _a.height, tabindex = _a.tabindex;
+            this.toggle.setAttribute("class", "toggle btn ".concat(this.sizeClass, " ").concat(style));
+            this.toggle.setAttribute("data-toggle", "toggle");
+            this.toggle.tabIndex = tabindex;
+            this.toggle.role = "button";
+            (_b = this.checkbox.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.toggle, this.checkbox);
+            this.toggle.appendChild(this.checkbox);
+            if (this.invCheckbox)
+                this.toggle.appendChild(this.invCheckbox);
+            this.toggle.appendChild(this.toggleGroup);
+            this.handleToggleSize(width, height);
+        };
+        /**
+         * Creates a div element representing the toggle group.
+         * The toggle group contains the on, off, and handle elements of the toggle.
+         * @returns An HTMLElement representing the toggle group element.
+         */
+        DOMBuilder.prototype.createToggleGroup = function () {
+            var toggleGroup = document.createElement("div");
+            toggleGroup.setAttribute("class", "toggle-group");
+            toggleGroup.appendChild(this.toggleOn);
+            toggleGroup.appendChild(this.toggleOff);
+            toggleGroup.appendChild(this.toggleHandle);
+            return toggleGroup;
+        };
+        /**
+         * Creates a span element representing a toggle option (on/off).
+         * The span element is given a class attribute with the provided style and size class.
+         * The innerHTML of the span element is set to the provided label.
+         * If a title is provided, the span element is given a title attribute with the provided title.
+         * @param label The text to be displayed in the toggle option.
+         * @param style The style of the toggle option (primary, secondary, etc.).
+         * @param title The title of the toggle option.
+         * @returns An HTMLElement representing the toggle option element.
+         */
+        DOMBuilder.prototype.createToggleSpan = function (label, style, title) {
+            var toggleSpan = document.createElement("span");
+            toggleSpan.setAttribute("class", "btn ".concat(this.sizeClass, " ").concat(style));
+            toggleSpan.innerHTML = label;
+            if (title)
+                toggleSpan.setAttribute("title", title);
+            return toggleSpan;
+        };
+        /**
+         * Creates a span element representing the toggle handle.
+         * The span element is given a class attribute with the provided size class.
+         * @returns An HTMLElement representing the toggle handle element.
+         */
+        DOMBuilder.prototype.createToggleHandle = function () {
+            var toggleHandle = document.createElement("span");
+            toggleHandle.setAttribute("class", "toggle-handle btn ".concat(this.sizeClass));
+            return toggleHandle;
+        };
+        /**
+         * Sets the width and height of the toggle element.
+         * If a width or height is not provided, the toggle element will be given a minimum width and height
+         * that is calculated based on the size of the toggle on and off options.
+         * @param width The width of the toggle element.
+         * @param height The height of the toggle element.
+         */
+        DOMBuilder.prototype.handleToggleSize = function (width, height) {
+            function calcH(toggleSpan) {
+                var styles = window.getComputedStyle(toggleSpan);
+                var height = toggleSpan.offsetHeight;
+                var borderTopWidth = parseFloat(styles.borderTopWidth);
+                var borderBottomWidth = parseFloat(styles.borderBottomWidth);
+                var paddingTop = parseFloat(styles.paddingTop);
+                var paddingBottom = parseFloat(styles.paddingBottom);
+                return (height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom);
+            }
+            if (width) {
+                this.toggle.style.width = width;
+            }
+            else {
+                this.toggle.style.minWidth = "100px"; // First approach for better calculation
+                this.toggle.style.minWidth = "".concat(Math.max(this.toggleOn.getBoundingClientRect().width, this.toggleOff.getBoundingClientRect().width) +
+                    this.toggleHandle.getBoundingClientRect().width / 2, "px");
+            }
+            if (height) {
+                this.toggle.style.height = height;
+            }
+            else {
+                this.toggle.style.minHeight = "36px"; // First approach for better calculation
+                this.toggle.style.minHeight = "".concat(Math.max(this.toggleOn.getBoundingClientRect().height, this.toggleOff.getBoundingClientRect().height), "px");
+            }
+            // B: Apply on/off class
+            this.toggleOn.classList.add("toggle-on");
+            this.toggleOff.classList.add("toggle-off");
+            // C: Finally, set lineHeight if needed
+            if (height) {
+                this.toggleOn.style.lineHeight = calcH(this.toggleOn) + "px";
+                this.toggleOff.style.lineHeight = calcH(this.toggleOff) + "px";
+            }
+        };
+        /**
+         * Renders the toggle element based on the provided state.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        DOMBuilder.prototype.render = function (state) {
+            this.toggle.classList.remove(this.onStyle, this.offStyle, "off", "indeterminate");
+            switch (state.value) {
+                case ToggleStateValue.ON:
+                    this.toggle.classList.add(this.onStyle);
+                    break;
+                case ToggleStateValue.OFF:
+                    this.toggle.classList.add(this.offStyle, "off");
+                    break;
+                case ToggleStateValue.INDETERMINATE:
+                    this.toggle.classList.add("indeterminate");
+                    if (state.checked) {
+                        this.toggle.classList.add(this.onStyle);
+                    }
+                    else {
+                        this.toggle.classList.add(this.offStyle, "off");
+                    }
+                    break;
+            }
+            this.checkbox.checked = state.checked;
+            if (this.invCheckbox)
+                this.invCheckbox.checked = !state.checked;
+            this.toggle.classList.add(state.checked ? this.onStyle : this.offStyle);
+            switch (state.status) {
+                case ToggleStateStatus.ENABLED:
+                    this.toggle.classList.remove("disabled");
+                    this.toggle.removeAttribute("disabled");
+                    this.checkbox.disabled = false;
+                    this.checkbox.readOnly = false;
+                    if (this.invCheckbox) {
+                        this.invCheckbox.disabled = false;
+                        this.invCheckbox.readOnly = false;
+                    }
+                    break;
+                case ToggleStateStatus.DISABLED:
+                    this.toggle.classList.add("disabled");
+                    this.toggle.setAttribute("disabled", "");
+                    this.checkbox.disabled = true;
+                    this.checkbox.readOnly = false;
+                    if (this.invCheckbox) {
+                        this.invCheckbox.disabled = true;
+                        this.invCheckbox.readOnly = false;
+                    }
+                    break;
+                case ToggleStateStatus.READONLY:
+                    this.toggle.classList.add("disabled");
+                    this.toggle.setAttribute("disabled", "");
+                    this.checkbox.disabled = false;
+                    this.checkbox.readOnly = true;
+                    if (this.invCheckbox) {
+                        this.invCheckbox.disabled = false;
+                        this.invCheckbox.readOnly = true;
+                    }
+                    break;
+            }
+            if (state.indeterminate) {
+                this.checkbox.indeterminate = true;
+                this.checkbox.removeAttribute("name");
+                if (this.invCheckbox)
+                    this.invCheckbox.indeterminate = true;
+                if (this.invCheckbox)
+                    this.invCheckbox.removeAttribute("name");
+            }
+            else {
+                this.checkbox.indeterminate = false;
+                if (this.name)
+                    this.checkbox.name = this.name;
+                if (this.invCheckbox)
+                    this.invCheckbox.indeterminate = false;
+                if (this.invCheckbox && this.name)
+                    this.invCheckbox.name = this.name;
+            }
+        };
+        Object.defineProperty(DOMBuilder.prototype, "root", {
+            /**
+             * Returns the root element of the toggle, which is the container of all toggle elements.
+             * @returns {HTMLElement} The root element of the toggle.
+             */
+            get: function () {
+                return this.toggle;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Destroys the toggle by removing the toggle element from the DOM and
+         *inserting the original checkbox element back into its original position.
+         */
+        DOMBuilder.prototype.destroy = function () {
+            var _a, _b;
+            (_a = this.toggle.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.checkbox, this.toggle);
+            (_b = this.toggle.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.toggle);
+        };
+        return DOMBuilder;
+    }());
+
+    function sanitize(text) {
+        if (!text)
+            return text;
+        var map = {
+            "&": "&amp;",
+            "<": "&lt;",
+            ">": "&gt;",
+            '"': "&quot;",
+            "'": "&#39;",
+            "/": "&#x2F;"
+        };
+        return text.replace(/[&<>"'/]/g, function (m) { return map[m]; });
+    }
+
+    /**
+     * OptionResolver is responsible for reading HTML attributes and user options
+     * to build a complete ToggleOptions object.
+     * It also handles deprecated options.
+     */
+    var OptionResolver = /** @class */ (function () {
+        function OptionResolver() {
+        }
+        /**
+         * Resolves all toggle options from the element and user options
+         * @param element HTMLInputElement representing the toggle
+         * @param userOptions Options provided by the user
+         * @returns Complete ToggleOptions object
+         */
+        OptionResolver.resolve = function (element, userOptions) {
+            if (userOptions === void 0) { userOptions = {}; }
+            var options = {
+                onlabel: this.getAttrOrDeprecation(element, "data-onlabel", userOptions.onlabel, false),
+                offlabel: this.getAttrOrDeprecation(element, "data-offlabel", userOptions.offlabel, false),
+                onstyle: this.getAttrOrDefault(element, "data-onstyle", userOptions.onstyle, OptionResolver.DEFAULT.onstyle),
+                offstyle: this.getAttrOrDefault(element, "data-offstyle", userOptions.offstyle, OptionResolver.DEFAULT.offstyle),
+                onvalue: this.getAttrOrDefault(element, "data-onvalue", userOptions.onvalue, OptionResolver.DEFAULT.onvalue),
+                offvalue: this.getAttrOrDefault(element, "data-offvalue", userOptions.offvalue, OptionResolver.DEFAULT.offvalue),
+                ontitle: this.getAttrOrDefault(element, "data-ontitle", userOptions.ontitle, OptionResolver.getAttr(element, "title") ||
+                    OptionResolver.DEFAULT.ontitle),
+                offtitle: this.getAttrOrDefault(element, "data-offtitle", userOptions.offtitle, OptionResolver.getAttr(element, "title") ||
+                    OptionResolver.DEFAULT.offtitle),
+                size: this.getAttrOrDefault(element, "data-size", userOptions.size, this.DEFAULT.size),
+                style: this.getAttrOrDefault(element, "data-style", userOptions.style, this.DEFAULT.style),
+                width: this.getAttrOrDefault(element, "data-width", userOptions.width, this.DEFAULT.width),
+                height: this.getAttrOrDefault(element, "data-height", userOptions.height, this.DEFAULT.height),
+                tabindex: Number(this.getAttrOrDefault(element, "tabindex", userOptions.tabindex, this.DEFAULT.tabindex)),
+                tristate: element.hasAttribute("tristate") ||
+                    userOptions.tristate ||
+                    OptionResolver.DEFAULT.tristate,
+                name: this.getAttrOrDefault(element, "name", userOptions.name, this.DEFAULT.name),
+            };
+            if (options.width && parseFloat(options.width))
+                options.width = "".concat(options.width, "px");
+            if (options.height && parseFloat(options.height))
+                options.height = "".concat(options.height, "px");
+            DeprecationConfig.handle(options, element, userOptions);
+            return options;
+        };
+        /** Default values for all toggle options */
+        OptionResolver.DEFAULT = {
+            onlabel: "On",
+            onstyle: "primary",
+            onvalue: null,
+            ontitle: null,
+            offlabel: "Off",
+            offstyle: "secondary",
+            offvalue: null,
+            offtitle: null,
+            size: "",
+            style: "",
+            width: null,
+            height: null,
+            tabindex: 0,
+            tristate: false,
+            name: null,
+        };
+        /**
+         * Gets a sanitized attribute value from an HTML element
+         * @param element HTMLInputElement to read
+         * @param attrName Attribute name
+         * @param sanitized Flag to indicate if the attribute value needs to be sanitized (default: {@code true})
+         * @returns Sanitized attribute value or null
+         */
+        OptionResolver.getAttr = function (element, attrName, sanitized) {
+            if (sanitized === void 0) { sanitized = true; }
+            return sanitized ? sanitize(element.getAttribute(attrName)) : element.getAttribute(attrName);
+        };
+        /**
+         * Returns the value of an attribute, user-provided value, or default value
+         * @param element HTMLInputElement to read
+         * @param attrName Attribute name
+         * @param userValue Value provided by the user
+         * @param defaultValue Default value if neither attribute nor user value exists
+         * @param sanitized Flag to indicate if the attribute value needs to be sanitized (default: {@code true})
+         * @returns Final attribute value
+         */
+        OptionResolver.getAttrOrDefault = function (element, attrName, userValue, defaultValue, sanitized) {
+            if (sanitized === void 0) { sanitized = true; }
+            return OptionResolver.getAttr(element, attrName, sanitized) || userValue || defaultValue;
+        };
+        /**
+         * Returns the value of an attribute, user-provided value, or marks as deprecated
+         * @param element HTMLInputElement to read
+         * @param attrName Attribute name
+         * @param userValue Value provided by the user
+         * @param sanitized Flag to indicate if the attribute value needs to be sanitized (default: {@code true})
+         * @returns Final attribute value or DeprecationConfig.value if not found
+         */
+        OptionResolver.getAttrOrDeprecation = function (element, attrName, userValue, sanitized) {
+            if (sanitized === void 0) { sanitized = true; }
+            return OptionResolver.getAttr(element, attrName, sanitized) ||
+                userValue ||
+                DeprecationConfig.value;
+        };
+        return OptionResolver;
+    }());
+    /** Types of deprecation source */
+    var OptionType;
+    (function (OptionType) {
+        OptionType["ATTRIBUTE"] = "attribute";
+        OptionType["OPTION"] = "option";
+    })(OptionType || (OptionType = {}));
+    /**
+     * Handles deprecated attributes and options for Bootstrap Toggle.
+     */
+    var DeprecationConfig = /** @class */ (function () {
+        function DeprecationConfig() {
+        }
+        /**
+         * Processes deprecated options and attributes and logs warnings
+         * @param options ToggleOptions object to update
+         * @param element HTMLInputElement to read deprecated attributes from
+         * @param userOptions UserOptions provided by the user
+         */
+        DeprecationConfig.handle = function (options, element, userOptions) {
+            var _this = this;
+            this.deprecatedOptions.forEach(function (_a) {
+                var currentOpt = _a.currentOpt, deprecatedAttr = _a.deprecatedAttr, deprecatedOpt = _a.deprecatedOpt;
+                if (options[currentOpt] === DeprecationConfig.value) {
+                    var deprecatedAttrSanitized = sanitize(element.getAttribute(deprecatedAttr));
+                    if (deprecatedAttrSanitized) {
+                        _this.log(OptionType.ATTRIBUTE, deprecatedAttr, "data-".concat(currentOpt));
+                        options[currentOpt] = deprecatedAttrSanitized;
+                    }
+                    else if (userOptions[deprecatedOpt]) {
+                        _this.log(OptionType.OPTION, deprecatedOpt, currentOpt);
+                        options[currentOpt] = userOptions[deprecatedOpt];
+                    }
+                    else {
+                        options[currentOpt] = OptionResolver.DEFAULT[currentOpt];
+                    }
+                }
+            });
+        };
+        /**
+         * Logs a deprecation warning to the console
+         * @param type Source of the deprecated option (ATTRIBUTE | OPTION)
+         * @param oldLabel Deprecated attribute or option name
+         * @param newLabel Recommended replacement option name
+         */
+        DeprecationConfig.log = function (type, oldLabel, newLabel) {
+            console.warn("Bootstrap Toggle deprecation warning: Using ".concat(oldLabel, " ").concat(type, " is deprecated. Use ").concat(newLabel, " instead."));
+        };
+        /** Unique string used to detect deprecated placeholders */
+        DeprecationConfig.value = "BOOTSTRAP TOGGLE DEPRECATION CHECK -- a0Jhux0QySypjjs4tLtEo8xT2kx0AbYaq9K6mgNjWSs0HF0L8T8J0M0o3Kr7zkm7 --";
+        /** Mapping of current option, deprecated attribute, and deprecated user option */
+        DeprecationConfig.deprecatedOptions = [
+            {
+                currentOpt: "onlabel",
+                deprecatedAttr: "data-on",
+                deprecatedOpt: "on",
+            },
+            {
+                currentOpt: "offlabel",
+                deprecatedAttr: "data-off",
+                deprecatedOpt: "off",
+            },
+        ];
+        return DeprecationConfig;
+    }());
+
+    var __assign = (undefined && undefined.__assign) || function () {
+        __assign = Object.assign || function(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    var StateReducer = /** @class */ (function () {
+        /**
+         * Constructor for the StateReducer class.
+         * @param element The HTMLInputElement which represents the toggle.
+         * @param isTristate A boolean indicating whether the toggle is tristate.
+         * Initializes the toggle state with the given element and tristate value.
+         */
+        function StateReducer(element, isTristate) {
+            this.isTristate = isTristate;
+            this.state = this.getElementState(element);
+        }
+        /**
+         * Retrieves the current state of the toggle based on the HTMLInputElement.
+         * The state is determined by the following:
+         * - The checked property of the input element
+         * - The disabled property of the input element
+         * - The readonly property of the input element
+         * - The indeterminate property of the input element if the toggle is tristate
+         * @returns An object containing the state of the toggle.
+         */
+        StateReducer.prototype.getElementState = function (element) {
+            var checked = element.checked;
+            var status = element.disabled ? ToggleStateStatus.DISABLED : element.readOnly ? ToggleStateStatus.READONLY : ToggleStateStatus.ENABLED;
+            var indeterminate = this.isTristate && element.indeterminate;
+            return {
+                value: indeterminate
+                    ? ToggleStateValue.INDETERMINATE
+                    : checked
+                        ? ToggleStateValue.ON
+                        : ToggleStateValue.OFF,
+                checked: checked,
+                status: status,
+                indeterminate: indeterminate,
+            };
+        };
+        /**
+         * Get the current toggle state.
+         * @returns An immutable copy of the current toggle state.
+         */
+        StateReducer.prototype.get = function () {
+            return Object.freeze(__assign({}, this.state));
+        };
+        /**
+         * Synchronizes the internal state of the toggle with the provided HTMLInputElement.
+         * This method is useful when you need to update the internal state of the toggle
+         * manually, such as when the toggle is updated programmatically.
+         * @param element The HTMLInputElement to synchronize the toggle state with.
+         */
+        StateReducer.prototype.sync = function (element) {
+            this.state = this.getElementState(element);
+        };
+        /**
+         * Apply a toggle action to the toggle state.
+         * @param action The toggle action to apply.
+         * @returns A boolean indicating whether the action was successful.
+         * If the toggle is disabled, any action execpect {@code ToggleActionType.ENABLE} will return {@code false}.
+         * If the toggle is currently in the target state of the action, the action will return {@code false}.
+         * If the toggle is in the indeterminate state and the action is {@code ToggleActionType.DETERMINATE},
+         * the toggle will be set to the checked state.
+         * If the action is {@code ToggleActionType.TOGGLE} :
+         *  - For a tristate toggle, the toggle will do ON -> INDETERMINATE -> OFF -> INDETERMINATE -> ON.
+         *  - For a non-tristate toggle, the toggle will do ON -> OFF -> ON.
+         */
+        StateReducer.prototype.do = function (action) {
+            switch (action) {
+                case ToggleActionType.ON:
+                    if (this.state.status != ToggleStateStatus.ENABLED)
+                        return false;
+                    if (this.state.value === ToggleStateValue.ON)
+                        return false;
+                    this.state = __assign(__assign({}, this.state), { value: ToggleStateValue.ON, checked: true, indeterminate: false });
+                    return true;
+                case ToggleActionType.OFF:
+                    if (this.state.status != ToggleStateStatus.ENABLED)
+                        return false;
+                    if (this.state.value === ToggleStateValue.OFF)
+                        return false;
+                    this.state = __assign(__assign({}, this.state), { value: ToggleStateValue.OFF, checked: false, indeterminate: false });
+                    return true;
+                case ToggleActionType.TOGGLE:
+                    if (this.state.status != ToggleStateStatus.ENABLED)
+                        return false;
+                    if (this.state.value === ToggleStateValue.ON)
+                        return this.do(ToggleActionType.OFF);
+                    if (this.state.value === ToggleStateValue.OFF)
+                        return this.do(ToggleActionType.ON);
+                    return false;
+                case ToggleActionType.INDETERMINATE:
+                    if (this.state.status != ToggleStateStatus.ENABLED)
+                        return false;
+                    if (this.state.value === ToggleStateValue.INDETERMINATE)
+                        return false;
+                    this.state = __assign(__assign({}, this.state), { value: ToggleStateValue.INDETERMINATE, indeterminate: true });
+                    return true;
+                case ToggleActionType.DETERMINATE:
+                    if (this.state.status != ToggleStateStatus.ENABLED)
+                        return false;
+                    if (this.state.value != ToggleStateValue.INDETERMINATE)
+                        return false;
+                    this.state = __assign(__assign({}, this.state), { value: this.state.checked
+                            ? ToggleStateValue.ON
+                            : ToggleStateValue.OFF, indeterminate: false });
+                    return true;
+                case ToggleActionType.NEXT:
+                    if (this.state.status != ToggleStateStatus.ENABLED)
+                        return false;
+                    if (this.isTristate) {
+                        if (this.state.value === ToggleStateValue.ON ||
+                            this.state.value === ToggleStateValue.OFF)
+                            return this.do(ToggleActionType.INDETERMINATE);
+                        if (this.state.value === ToggleStateValue.INDETERMINATE &&
+                            this.state.checked)
+                            return this.do(ToggleActionType.OFF);
+                        if (this.state.value === ToggleStateValue.INDETERMINATE &&
+                            !this.state.checked)
+                            return this.do(ToggleActionType.ON);
+                    }
+                    else {
+                        if (this.state.value === ToggleStateValue.ON)
+                            return this.do(ToggleActionType.OFF);
+                        if (this.state.value === ToggleStateValue.OFF)
+                            return this.do(ToggleActionType.ON);
+                    }
+                    return false;
+                case ToggleActionType.DISABLE:
+                    if (this.state.status === ToggleStateStatus.DISABLED)
+                        return false;
+                    this.state = __assign(__assign({}, this.state), { status: ToggleStateStatus.DISABLED });
+                    return true;
+                case ToggleActionType.ENABLE:
+                    if (this.state.status === ToggleStateStatus.ENABLED)
+                        return false;
+                    this.state = __assign(__assign({}, this.state), { status: ToggleStateStatus.ENABLED });
+                    return true;
+                case ToggleActionType.READONLY:
+                    if (this.state.status != ToggleStateStatus.ENABLED)
+                        return false;
+                    this.state = __assign(__assign({}, this.state), { status: ToggleStateStatus.READONLY });
+                    return true;
+            }
+        };
+        return StateReducer;
+    }());
+
+    var Toggle = /** @class */ (function () {
+        /**
+         * Initializes a new instance of the BootstrapToggle class.
+         * @param element The HTMLInputElement element which represents the toggle.
+         * @param options The options for the toggle.
+         * @returns The constructed BootstrapToggle instance.
+         */
+        function Toggle(element, options) {
+            var _this = this;
+            this.eventsBound = false;
+            this.handlePointerEvent = function (e) {
+                _this.apply(ToggleActionType.NEXT);
+            };
+            this.handlerKeyboardEvent = function (e) {
+                if (e.key == " ") {
+                    _this.apply(ToggleActionType.NEXT);
+                }
+            };
+            this.handlerLabelEvent = function (e) {
+                e.preventDefault();
+                _this.apply(ToggleActionType.NEXT);
+                _this.domBuilder.root.focus();
+            };
+            this.element = element;
+            this.options = OptionResolver.resolve(element, options);
+            this.stateReducer = new StateReducer(element, this.options.tristate);
+            this.domBuilder = new DOMBuilder(element, this.options, this.stateReducer.get());
+            this.bindEventListeners();
+            this.element.bsToggle = this;
+        }
+        /**
+         * Binds event listeners to the toggle element.
+         * This method is called by the constructor and is responsible for
+         * binding the following event listeners:
+         * - Pointer events (click, touchstart, touchend)
+         * - Keyboard events (keydown, keyup)
+         * - Label events (click)
+         * If the event listeners are already bound (i.e. this.eventsBound is true),
+         * this method does nothing.
+         * @returns void
+         */
+        Toggle.prototype.bindEventListeners = function () {
+            if (this.eventsBound)
+                return;
+            this.bindPointerEventListener();
+            this.bindKeyboardEventListener();
+            this.bindLabelEventListener();
+            this.eventsBound = true;
+        };
+        /**
+         * Unbinds all event listeners from the toggle element.
+         * This method is called by the destructor and is responsible for
+         * unbinding the following event listeners:
+         * - Pointer events (click, touchstart, touchend)
+         * - Keyboard events (keydown, keyup)
+         * - Label events (click)
+         * If the event listeners are not bound (i.e. this.eventsBound is false),
+         * this method does nothing.
+         * @returns void
+         */
+        Toggle.prototype.unbindEventListeners = function () {
+            if (!this.eventsBound)
+                return;
+            this.unbindPointerEventListener();
+            this.unbindKeyboardEventListener();
+            this.unbindLabelEventListener();
+            this.eventsBound = false;
+        };
+        /**
+         * Binds a pointerdown event listener to the root element of the toggle.
+         * The event listener is responsible for handling pointer events (e.g. mouse clicks, touch events)
+         * and triggering the toggle's state change when a pointer event occurs.
+         * The event listener is bound with the passive option, which means that it will not block
+         * other event listeners from being triggered.
+         */
+        Toggle.prototype.bindPointerEventListener = function () {
+            this.domBuilder.root.addEventListener("pointerdown", this.handlePointerEvent, { passive: true });
+        };
+        /**
+         * Unbinds the pointerdown event listener from the root element of the toggle.
+         * This method is responsible for unbinding the pointerdown event listener that was
+         * previously bound by the bindPointerEventListener method.
+         * If the event listener is not bound (i.e. this.eventsBound is false), this method does nothing.
+         * @returns void
+         */
+        Toggle.prototype.unbindPointerEventListener = function () {
+            this.domBuilder.root.removeEventListener("pointerdown", this.handlePointerEvent);
+        };
+        /**
+         * Binds a keypress event listener to the root element of the toggle.
+         * The event listener is responsible for handling keypress events
+         * and triggering the toggle's state change when a keypress event occurs.
+         * The event listener is bound with the passive option, which means that it will not block
+         * other event listeners from being triggered.
+         */
+        Toggle.prototype.bindKeyboardEventListener = function () {
+            this.domBuilder.root.addEventListener("keypress", this.handlerKeyboardEvent, { passive: true });
+        };
+        /**
+         * Unbinds the keypress event listener from the root element of the toggle.
+         * This method is responsible for unbinding the keypress event listener that was
+         * previously bound by the bindKeyboardEventListener method.
+         * If the event listener is not bound (i.e. this.eventsBound is false), this method does nothing.
+         * @returns void
+         */
+        Toggle.prototype.unbindKeyboardEventListener = function () {
+            this.domBuilder.root.removeEventListener("keypress", this.handlerKeyboardEvent);
+        };
+        /**
+         * Binds a click event listener to all labels that are associated with the toggle's input element.
+         * The event listener is responsible for handling click events and triggering the toggle's state change when a click event occurs.
+         * The event listener is bound with the passive option set to false, which means that it will block other event listeners from being triggered until it has finished its execution.
+         * This method is called by the constructor and is responsible for binding the event listener to the toggle's labels.
+         * If the toggle's input element does not have an id (i.e. this.element.id is null or undefined), this method does nothing.
+         * @returns void
+         */
+        Toggle.prototype.bindLabelEventListener = function () {
+            var _this = this;
+            if (this.element.id) {
+                document
+                    .querySelectorAll('label[for="' + this.element.id + '"]')
+                    .forEach(function (label) {
+                    label.addEventListener("click", _this.handlerLabelEvent, {
+                        passive: false,
+                    });
+                });
+            }
+        };
+        /**
+         * Unbinds the click event listener from all labels that are associated with the toggle's input element.
+         * This method is responsible for unbinding the event listener that was previously bound by the bindLabelEventListener method.
+         * If the toggle's input element does not have an id (i.e. this.element.id is null or undefined), this method does nothing.
+         * @returns void
+         */
+        Toggle.prototype.unbindLabelEventListener = function () {
+            var _this = this;
+            if (this.element.id) {
+                document
+                    .querySelectorAll('label[for="' + this.element.id + '"]')
+                    .forEach(function (label) {
+                    label.removeEventListener("click", _this.handlerLabelEvent);
+                });
+            }
+        };
+        /**
+         * Applies a toggle action to the toggle state and renders the toggle element.
+         * If the action is successful, this method will render the toggle element with the new state.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @param action The toggle action to apply.
+         * @param silent A boolean indicating whether to trigger the change event after applying the action.
+         */
+        Toggle.prototype.apply = function (action, silent) {
+            if (silent === void 0) { silent = false; }
+            if (this.stateReducer.do(action)) {
+                this.domBuilder.render(this.stateReducer.get());
+                if (!silent)
+                    this.trigger();
+            }
+        };
+        /**
+         * Toggles the state of the toggle.
+         * If the toggle is currently in the on state, it will be set to the off state.
+         * If the toggle is currently in the off state, it will be set to the on state.
+         * If the toggle is currently in the indeterminate state, it will be set to the on state.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @param silent A boolean indicating whether to trigger the change event after applying the action.
+         */
+        Toggle.prototype.toggle = function (silent) {
+            if (silent === void 0) { silent = false; }
+            this.apply(ToggleActionType.TOGGLE, silent);
+        };
+        /**
+         * Sets the toggle state to on.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @param silent A boolean indicating whether to trigger the change event after applying the action.
+         */
+        Toggle.prototype.on = function (silent) {
+            if (silent === void 0) { silent = false; }
+            this.apply(ToggleActionType.ON, silent);
+        };
+        /**
+         * Sets the toggle state to off.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @param silent A boolean indicating whether to trigger the change event after applying the action.
+         */
+        Toggle.prototype.off = function (silent) {
+            if (silent === void 0) { silent = false; }
+            this.apply(ToggleActionType.OFF, silent);
+        };
+        /**
+         * Sets the toggle state to indeterminate.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @param {boolean} silent A boolean indicating whether to trigger the change event after applying the action.
+         */
+        Toggle.prototype.indeterminate = function (silent) {
+            if (silent === void 0) { silent = false; }
+            this.apply(ToggleActionType.INDETERMINATE, silent);
+        };
+        /**
+         * Sets the toggle state to determinate.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @param {boolean} silent A boolean indicating whether to trigger the change event after applying the action.
+         */
+        Toggle.prototype.determinate = function (silent) {
+            if (silent === void 0) { silent = false; }
+            this.apply(ToggleActionType.DETERMINATE, silent);
+        };
+        /**
+         * Enables the toggle.
+         * If the toggle is currently disabled, this method will set the toggle state to enabled.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @returns void
+         */
+        Toggle.prototype.enable = function () {
+            this.apply(ToggleActionType.ENABLE);
+        };
+        /**
+         * Disables the toggle.
+         * If the toggle is currently enabled, this method will set the toggle state to disabled.
+         * If the silent parameter is false, this method will also trigger the change event.
+         */
+        Toggle.prototype.disable = function () {
+            this.apply(ToggleActionType.DISABLE);
+        };
+        /**
+         * Sets the toggle state to readonly.
+         * If the toggle is currently disabled or enabled, this method will set the toggle state to readonly.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @returns void
+         */
+        Toggle.prototype.readonly = function () {
+            this.apply(ToggleActionType.READONLY);
+        };
+        /**
+         * Synchronizes the toggle state with the input element and renders the toggle.
+         * If the silent parameter is false, this method will also trigger the change event.
+         * @param {boolean} silent A boolean indicating whether to trigger the change event after synchronizing the toggle state.
+         */
+        Toggle.prototype.update = function (silent) {
+            this.stateReducer.sync(this.element);
+            this.domBuilder.render(this.stateReducer.get());
+            if (!silent)
+                this.trigger();
+        };
+        /**
+         * Triggers the change event on the toggle's input element.
+         * @param {boolean} silent A boolean indicating whether to trigger the change event.
+         * If the silent parameter is false, this method will trigger the change event.
+         */
+        Toggle.prototype.trigger = function (silent) {
+            if (silent === void 0) { silent = false; }
+            if (!silent)
+                this.element.dispatchEvent(new Event("change", { bubbles: true }));
+        };
+        /**
+         * Destroys the toggle element and unbinds all event listeners.
+         *This method is useful when you need to remove the toggle element from the DOM.
+         *After calling this method, the toggle element will be removed from the DOM and all event listeners will be unbound.
+         */
+        Toggle.prototype.destroy = function () {
+            this.unbindEventListeners();
+            this.domBuilder.destroy();
+            delete this.element.bsToggle;
+        };
+        /**
+         * Destroys the toggle element and reinitializes it with the same options.
+         *This method is useful when you need to reinitialize the toggle element with the same options.
+         */
+        Toggle.prototype.rerender = function () {
+            this.destroy();
+            this.element.bootstrapToggle();
+        };
+        return Toggle;
+    }());
+
+    var ToggleMethods;
+    (function (ToggleMethods) {
+        ToggleMethods["on"] = "on";
+        ToggleMethods["ON"] = "ON";
+        ToggleMethods["off"] = "off";
+        ToggleMethods["OFF"] = "OFF";
+        ToggleMethods["toggle"] = "toggle";
+        ToggleMethods["TOGGLE"] = "TOGGLE";
+        ToggleMethods["determinate"] = "determinate";
+        ToggleMethods["DETERMINATE"] = "DETERMINATE";
+        ToggleMethods["indeterminate"] = "indeterminate";
+        ToggleMethods["INDETERMINATE"] = "INDETERMINATE";
+        ToggleMethods["enable"] = "enable";
+        ToggleMethods["ENABLE"] = "ENABLE";
+        ToggleMethods["disable"] = "disable";
+        ToggleMethods["DISABLE"] = "DISABLE";
+        ToggleMethods["readonly"] = "readonly";
+        ToggleMethods["READONLY"] = "READONLY";
+        ToggleMethods["destroy"] = "destroy";
+        ToggleMethods["DESTROY"] = "DESTROY";
+        ToggleMethods["rerender"] = "rerender";
+        ToggleMethods["RENDERER"] = "RENDERER";
+    })(ToggleMethods || (ToggleMethods = {}));
+
+    (function () {
+        /**
+         * Add `bootstrapToggle` prototype function to HTML Elements
+         * Enables execution when used with HTML - ex: `document.getElementById('toggle').bootstrapToggle('on')`
+         */
+        HTMLInputElement.prototype.bootstrapToggle = function (options, silent) {
+            var _bsToggle = this.bsToggle || new Toggle(this, (options && typeof options !== "string") ? options : {});
+            // Execute method calls
+            if (options && typeof options === "string") {
+                switch (options) {
+                    case ToggleMethods.TOGGLE:
+                    case ToggleMethods.toggle:
+                        return _bsToggle.toggle(silent);
+                    case ToggleMethods.ON:
+                    case ToggleMethods.on:
+                        return _bsToggle.on(silent);
+                    case ToggleMethods.OFF:
+                    case ToggleMethods.off:
+                        return _bsToggle.off(silent);
+                    case ToggleMethods.INDETERMINATE:
+                    case ToggleMethods.indeterminate:
+                        return _bsToggle.indeterminate(silent);
+                    case ToggleMethods.DETERMINATE:
+                    case ToggleMethods.determinate:
+                        return _bsToggle.determinate(silent);
+                    case ToggleMethods.ENABLE:
+                    case ToggleMethods.enable:
+                        return _bsToggle.enable();
+                    case ToggleMethods.DISABLE:
+                    case ToggleMethods.disable:
+                        return _bsToggle.disable();
+                    case ToggleMethods.READONLY:
+                    case ToggleMethods.readonly:
+                        return _bsToggle.readonly();
+                    case ToggleMethods.DESTROY:
+                    case ToggleMethods.destroy:
+                        return _bsToggle.destroy();
+                    case ToggleMethods.RENDERER:
+                    case ToggleMethods.rerender:
+                        return _bsToggle.rerender();
+                }
+            }
+        };
+        /**
+         * Replace all `input[type=checkbox][data-toggle="toggle"]` inputs with "Bootstrap-Toggle"
+         * Executes once page elements have rendered enabling script to be placed in `<head>`
+         */
+        if (typeof window !== "undefined")
+            window.onload = function () {
+                document
+                    .querySelectorAll('input[type=checkbox][data-toggle="toggle"]')
+                    .forEach(function (ele) {
+                    ele.bootstrapToggle();
+                });
+            };
+        // Export library if possible
+        if (typeof module !== "undefined" && module.exports) {
+            module.exports = Toggle;
+        }
+    })();
+
+}));
+//# sourceMappingURL=bootstrap5-toggle.ecmas.js.map