bootstrap5-toggle 5.2.0-rc2 → 5.2.0

package/js/bootstrap5-toggle.jquery.js

@@ -1,5 +1,5 @@
 /* Copyright Notice
- * bootstrap5-toggle v5.2.0-rc2
+ * bootstrap5-toggle v5.2.0
  * https://palcarazm.github.io/bootstrap5-toggle/
  * @author 2011-2014 Min Hur (https://github.com/minhur)
  * @author 2018-2019 Brent Ely (https://github.com/gitbrent)
@@ -135,7 +135,7 @@
         DOMBuilder.prototype.createInvCheckbox = function (offValue) {
             var invCheckbox = this.checkbox.cloneNode(true);
             invCheckbox.value = offValue;
-            invCheckbox.setAttribute("data-toggle", "invert-toggle");
+            invCheckbox.dataset.toggle = "invert-toggle";
             invCheckbox.removeAttribute("id");
             return invCheckbox;
         };
@@ -151,8 +151,8 @@
         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.className = "toggle btn ".concat(this.sizeClass, " ").concat(style);
+            this.toggle.dataset.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);
@@ -170,7 +170,7 @@
        */
         DOMBuilder.prototype.createToggleGroup = function () {
             var toggleGroup = document.createElement("div");
-            toggleGroup.setAttribute("class", "toggle-group");
+            toggleGroup.className = "toggle-group";
             toggleGroup.appendChild(this.toggleOn);
             toggleGroup.appendChild(this.toggleOff);
             toggleGroup.appendChild(this.toggleHandle);
@@ -188,10 +188,10 @@
        */
         DOMBuilder.prototype.createToggleSpan = function (label, style, title) {
             var toggleSpan = document.createElement("span");
-            toggleSpan.setAttribute("class", "btn ".concat(this.sizeClass, " ").concat(style));
+            toggleSpan.className = "btn ".concat(this.sizeClass, " ").concat(style);
             toggleSpan.innerHTML = label;
             if (title)
-                toggleSpan.setAttribute("title", title);
+                toggleSpan.title = title;
             return toggleSpan;
         };
         /**
@@ -201,7 +201,7 @@
        */
         DOMBuilder.prototype.createToggleHandle = function () {
             var toggleHandle = document.createElement("span");
-            toggleHandle.setAttribute("class", "toggle-handle btn ".concat(this.sizeClass));
+            toggleHandle.className = "toggle-handle btn ".concat(this.sizeClass);
             return toggleHandle;
         };
         /**
@@ -212,15 +212,6 @@
        * @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;
             }
@@ -241,20 +232,50 @@
             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";
+                this.toggleOn.style.lineHeight = DOMBuilder.calcH(this.toggleOn) + "px";
+                this.toggleOff.style.lineHeight = DOMBuilder.calcH(this.toggleOff) + "px";
             }
         };
+        /**
+         * Calculates the height of the toggle element that should be used for the line-height property.
+         * This calculation is used when the toggle element is given a height that is not explicitly set.
+         * The calculation takes into account the height of the toggle element, the border-top and border-bottom widths,
+         * and the padding-top and padding-bottom of the toggle element.
+         * @param toggleSpan The HTMLElement that represents the toggle element.
+         * @returns The height of the toggle element that should be used for the line-height property.
+         */
+        DOMBuilder.calcH = function (toggleSpan) {
+            var styles = globalThis.window.getComputedStyle(toggleSpan);
+            var height = toggleSpan.offsetHeight;
+            var borderTopWidth = Number.parseFloat(styles.borderTopWidth);
+            var borderBottomWidth = Number.parseFloat(styles.borderBottomWidth);
+            var paddingTop = Number.parseFloat(styles.paddingTop);
+            var paddingBottom = Number.parseFloat(styles.paddingBottom);
+            return (height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom);
+        };
         /**
        * Renders the toggle element based on the provided state if the toggle is already built.
        * This method should be called whenever the state of the toggle changes.
        * @param {ToggleState} state The state of the toggle element.
        */
         DOMBuilder.prototype.render = function (state) {
-            this.toggle.classList.remove(this.onStyle, this.offStyle, "off", "indeterminate");
             this.lastState = state;
             if (!this.isBuilt)
                 return;
+            this.updateToggleByValue(state);
+            this.updateToggleByChecked(state);
+            this.updateToggleByState(state);
+        };
+        /*************  ✨ Windsurf Command ⭐  *************/
+        /**
+         * Updates the class of the toggle element based on the provided state.
+         * Removes any existing on/off/indeterminate classes and adds the appropriate class based on the state.
+         * If the state is indeterminate, adds the 'indeterminate' class and either the on or off class based on the checked attribute.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        /*******  9e620de0-7e60-44a0-b26d-be36099794af  *******/
+        DOMBuilder.prototype.updateToggleByValue = function (state) {
+            this.toggle.classList.remove(this.onStyle, this.offStyle, "off", "indeterminate");
             switch (state.value) {
                 case ToggleStateValue.ON:
                     this.toggle.classList.add(this.onStyle);
@@ -272,42 +293,78 @@
                     }
                     break;
             }
+        };
+        /**
+         * Updates the toggle element based on the provided state.
+         * Calls {@link DOMBuilder.updateCheckboxByChecked} and {@link DOMBuilder.updateInvCheckboxByChecked} to update the checkbox and inverted checkbox elements respectively.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        DOMBuilder.prototype.updateToggleByChecked = function (state) {
+            this.updateCheckboxByChecked(state);
+            this.updateInvCheckboxByChecked(state);
+        };
+        /**
+         * Updates the checkbox element based on the provided state.
+         * Sets the checked attribute of the checkbox based on the state's checked attribute.
+         * Sets the disabled and readonly attributes of the checkbox based on the state's status.
+         * Adds or removes the 'disabled' class from the toggle element based on the state's status.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        DOMBuilder.prototype.updateCheckboxByChecked = function (state) {
             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;
-                    }
+                    this.toggle.classList.remove("disabled");
+                    this.toggle.removeAttribute("disabled");
                     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", "");
+                    break;
+                case ToggleStateStatus.READONLY:
                     this.checkbox.disabled = false;
                     this.checkbox.readOnly = true;
-                    if (this.invCheckbox) {
-                        this.invCheckbox.disabled = false;
-                        this.invCheckbox.readOnly = true;
-                    }
+                    this.toggle.classList.add("disabled");
+                    this.toggle.setAttribute("disabled", "");
                     break;
             }
+        };
+        /**
+         * Updates the inverted checkbox element based on the provided state.
+         * Sets the checked attribute of the inverted checkbox to the opposite of the state's checked attribute.
+         * Sets the disabled and readonly attributes of the inverted checkbox based on the state's status.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        DOMBuilder.prototype.updateInvCheckboxByChecked = function (state) {
+            if (!this.invCheckbox)
+                return;
+            this.invCheckbox.checked = !state.checked;
+            switch (state.status) {
+                case ToggleStateStatus.ENABLED:
+                    this.invCheckbox.disabled = false;
+                    this.invCheckbox.readOnly = false;
+                    break;
+                case ToggleStateStatus.DISABLED:
+                    this.invCheckbox.disabled = true;
+                    this.invCheckbox.readOnly = false;
+                    break;
+                case ToggleStateStatus.READONLY:
+                    this.invCheckbox.disabled = false;
+                    this.invCheckbox.readOnly = true;
+                    break;
+            }
+        };
+        /**
+         * Updates the indeterminate attribute of the checkbox and inverted checkbox elements based on the provided state.
+         * If the state is indeterminate, sets the indeterminate attribute of the checkbox and inverted checkbox to true and removes the name attribute.
+         * If the state is not indeterminate, sets the indeterminate attribute of the checkbox and inverted checkbox to false and sets the name attribute to the provided name.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        DOMBuilder.prototype.updateToggleByState = function (state) {
             if (state.indeterminate) {
                 this.checkbox.indeterminate = true;
                 this.checkbox.removeAttribute("name");
@@ -343,10 +400,10 @@
        * Also disconnects the ResizeObserver if it was used.
        */
         DOMBuilder.prototype.destroy = function () {
-            var _a, _b, _c;
+            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);
-            (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+            this.toggle.remove();
+            (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
             this.resizeObserver = undefined;
             this.isBuilt = false;
         };
@@ -364,6 +421,7 @@
             "'": "'",
             "/": "/"
         };
+        // Using replace with regex for single-pass character mapping compatible with ES5
         return text.replace(/[&<>"'/]/g, function (m) { return map[m]; });
     }
     /**
@@ -391,6 +449,46 @@
         function OptionResolver() {
         }
         /**
+       * Gets a sanitized attribute value from an HTML element
+       * @param element HTMLInputElement to read
+       * @param attrName Attribute name
+       * @param options method options
+       * @param options.sanitized Flag to indicate if the attribute value needs to be sanitized (default: `true`)
+       * @returns Sanitized attribute value or null
+       */
+        OptionResolver.getAttr = function (element, attrName, opts) {
+            var _a = (opts !== null && opts !== void 0 ? opts : {}).sanitized, sanitized = _a === void 0 ? true : _a;
+            var value = element.getAttribute(attrName);
+            return sanitized ? sanitize(value) : value;
+        };
+        /**
+       * 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: 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: sanitized }) ||
+                userValue ||
+                DeprecationConfig.value;
+        };
+        /**
        * Resolves all toggle options from the element and user options
        * @param element HTMLInputElement representing the toggle
        * @param userOptions Options provided by the user
@@ -444,44 +542,6 @@
             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 */
@@ -582,14 +642,29 @@
        */
         StateReducer.prototype.getElementState = function (element) {
             var checked = element.checked;
-            var status = element.disabled ? ToggleStateStatus.DISABLED : element.readOnly ? ToggleStateStatus.READONLY : ToggleStateStatus.ENABLED;
+            var status;
+            if (element.disabled) {
+                status = ToggleStateStatus.DISABLED;
+            }
+            else if (element.readOnly) {
+                status = ToggleStateStatus.READONLY;
+            }
+            else {
+                status = ToggleStateStatus.ENABLED;
+            }
             var indeterminate = this.isTristate && element.indeterminate;
+            var value;
+            if (indeterminate) {
+                value = ToggleStateValue.INDETERMINATE;
+            }
+            else if (checked) {
+                value = ToggleStateValue.ON;
+            }
+            else {
+                value = ToggleStateValue.OFF;
+            }
             return {
-                value: indeterminate
-                    ? ToggleStateValue.INDETERMINATE
-                    : checked
-                        ? ToggleStateValue.ON
-                        : ToggleStateValue.OFF,
+                value: value,
                 checked: checked,
                 status: status,
                 indeterminate: indeterminate,
@@ -626,87 +701,115 @@
        * 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} :
+       * If the action is {@code ToggleActionType.NEXT} :
        *  - 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) {
+            var actionsRequiringInteract = [
+                ToggleActionType.ON,
+                ToggleActionType.OFF,
+                ToggleActionType.TOGGLE,
+                ToggleActionType.INDETERMINATE,
+                ToggleActionType.DETERMINATE,
+                ToggleActionType.NEXT,
+                ToggleActionType.READONLY,
+            ];
+            if (actionsRequiringInteract.includes(action) && !this.canInteract())
+                return false;
             switch (action) {
                 case ToggleActionType.ON:
-                    if (!this.canInteract())
-                        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;
+                    return this.setValueIfChanged(ToggleStateValue.ON, true, false);
                 case ToggleActionType.OFF:
-                    if (!this.canInteract())
-                        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;
+                    return this.setValueIfChanged(ToggleStateValue.OFF, false, false);
                 case ToggleActionType.TOGGLE:
-                    if (!this.canInteract())
-                        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.canInteract())
-                        return false;
-                    if (this.state.value === ToggleStateValue.INDETERMINATE)
-                        return false;
-                    this.state = __assign(__assign({}, this.state), { value: ToggleStateValue.INDETERMINATE, indeterminate: true });
-                    return true;
+                    return this.setValueIfChanged(ToggleStateValue.INDETERMINATE, undefined, true);
                 case ToggleActionType.DETERMINATE:
-                    if (!this.canInteract())
-                        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;
+                    return this.setValue(this.state.checked ? ToggleStateValue.ON : ToggleStateValue.OFF, this.state.checked, false);
                 case ToggleActionType.NEXT:
-                    if (!this.canInteract())
-                        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;
+                    return this.doNext();
                 case ToggleActionType.DISABLE:
-                    if (this.state.status === ToggleStateStatus.DISABLED)
-                        return false;
-                    this.state = __assign(__assign({}, this.state), { status: ToggleStateStatus.DISABLED });
-                    return true;
+                    return this.setStatusIfChanged(ToggleStateStatus.DISABLED);
                 case ToggleActionType.ENABLE:
-                    if (this.state.status === ToggleStateStatus.ENABLED)
-                        return false;
-                    this.state = __assign(__assign({}, this.state), { status: ToggleStateStatus.ENABLED });
-                    return true;
+                    return this.setStatusIfChanged(ToggleStateStatus.ENABLED);
                 case ToggleActionType.READONLY:
-                    if (!this.canInteract())
-                        return false;
-                    this.state = __assign(__assign({}, this.state), { status: ToggleStateStatus.READONLY });
-                    return true;
+                    return this.setStatus(ToggleStateStatus.READONLY);
+            }
+        };
+        /**
+         * Sets the state of the toggle to the provided value.
+         * If checked or indeterminate is provided, sets the corresponding property of the state to the provided value.
+         * Otherwise, leaves the property unchanged.
+         * @param value The value of the toggle to set.
+         * @param checked The checked state of the toggle to set. If not provided, the property is left unchanged.
+         * @param indeterminate The indeterminate state of the toggle to set. If not provided, the property is left unchanged.
+         * @returns A boolean indicating whether the state was updated.
+         */
+        StateReducer.prototype.setValue = function (value, checked, indeterminate) {
+            this.state = __assign(__assign({}, this.state), { value: value, checked: checked !== null && checked !== void 0 ? checked : this.state.checked, indeterminate: indeterminate !== null && indeterminate !== void 0 ? indeterminate : this.state.indeterminate });
+            return true;
+        };
+        /**
+         * Sets the state of the toggle to the provided value if the value is different from the current state.
+         * If checked or indeterminate is provided, sets the corresponding property of the state to the provided value.
+         * Otherwise, leaves the property unchanged.
+         * @returns A boolean indicating whether the state was updated.
+         */
+        StateReducer.prototype.setValueIfChanged = function (value, checked, indeterminate) {
+            if (this.state.value === value)
+                return false;
+            return this.setValue(value, checked, indeterminate);
+        };
+        /**
+         * Sets the status of the toggle to the provided value.
+         * @param status The new status of the toggle.
+         * @returns A boolean indicating whether the state was updated.
+         */
+        StateReducer.prototype.setStatus = function (status) {
+            this.state = __assign(__assign({}, this.state), { status: status });
+            return true;
+        };
+        /**
+         * Sets the status of the toggle to the provided value if the value is different from the current status.
+         * @param status The new status of the toggle.
+         * @returns A boolean indicating whether the state was updated.
+         */
+        StateReducer.prototype.setStatusIfChanged = function (status) {
+            if (this.state.status === status)
+                return false;
+            return this.setStatus(status);
+        };
+        /**
+         * Applies the next action based on the current state of the toggle.
+         * If the toggle is tristate, cycles through the on, off, and indeterminate states.
+         * If the toggle is not tristate, cycles through the on and off states.
+         * @returns A boolean indicating whether the state was updated.
+         */
+        StateReducer.prototype.doNext = function () {
+            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) {
+                    return this.state.checked
+                        ? this.do(ToggleActionType.OFF)
+                        : this.do(ToggleActionType.ON);
+                }
             }
+            else {
+                return this.state.value === ToggleStateValue.ON
+                    ? this.do(ToggleActionType.OFF)
+                    : this.do(ToggleActionType.ON);
+            }
+            return false;
         };
         return StateReducer;
     }());
@@ -723,6 +826,19 @@
             this.pointer = null;
             this.SCROLL_THRESHOLD = 10;
             this.eventsBound = false;
+            this.suppressExternalSync = false;
+            this.originalDescriptors = new Map();
+            /**
+             * Handles the change event of the input element of the toggle.
+             * This event listener is responsible for detecting when the input element
+             * of the toggle changes its state and triggering the update method to keep the toggle in sync.
+             */
+            this.onExternalChange = function () {
+                _this.update(true);
+            };
+            this.onFormReset = function () {
+                setTimeout(function () { return _this.onExternalChange(); }, 0);
+            };
             /**
            * Handles pointer down events by initiating the toggle action and setting up
            * listeners for pointer movement, release, and cancellation.
@@ -811,8 +927,54 @@
             this.stateReducer = new StateReducer(element, this.options.tristate);
             this.domBuilder = new DOMBuilder(element, this.options, this.stateReducer.get());
             this.bindEventListeners();
+            this.interceptInputProperties();
             this.element.bsToggle = this;
         }
+        /**
+         * Intercepts the following input properties to detect external changes:
+         * - checked
+         * - disabled
+         * - readonly
+         * - indeterminate
+         * This method is used to detect changes made to the input element directly,
+         * rather than through the BootstrapToggle API. It is used to maintain the
+         * state of the toggle in cases where the user changes the input element
+         * directly, rather than through the API.
+         * @returns void
+         */
+        Toggle.prototype.interceptInputProperties = function () {
+            var _this = this;
+            var props = ["checked", "disabled", "readOnly", "indeterminate"];
+            props.forEach(function (prop) {
+                var descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(_this.element), prop);
+                if (!(descriptor === null || descriptor === void 0 ? void 0 : descriptor.set))
+                    return;
+                _this.originalDescriptors.set(prop, descriptor);
+                Object.defineProperty(_this.element, prop, {
+                    configurable: true,
+                    get: function () { return descriptor.get.call(_this.element); },
+                    set: function (value) {
+                        descriptor.set.call(_this.element, value);
+                        if (_this.suppressExternalSync)
+                            return;
+                        _this.onExternalChange();
+                    },
+                });
+            });
+        };
+        /**
+         * Restores the original input properties of the toggle element.
+         * This method is used to restore the original descriptors of the input properties
+         * which were intercepted by the BootstrapToggle to detect external changes.
+         * @returns void
+         */
+        Toggle.prototype.restoreInputProperties = function () {
+            var _this = this;
+            this.originalDescriptors.forEach(function (descriptor, prop) {
+                Object.defineProperty(_this.element, prop, descriptor);
+            });
+            this.originalDescriptors.clear();
+        };
         /**
        * Binds event listeners to the toggle element.
        * This method is called by the constructor and is responsible for
@@ -827,6 +989,7 @@
         Toggle.prototype.bindEventListeners = function () {
             if (this.eventsBound)
                 return;
+            this.bindFormResetListener();
             this.bindPointerEventListener();
             this.bindKeyboardEventListener();
             this.bindLabelEventListener();
@@ -846,11 +1009,24 @@
         Toggle.prototype.unbindEventListeners = function () {
             if (!this.eventsBound)
                 return;
+            this.unbindFormResetListener();
             this.unbindPointerEventListener();
             this.unbindKeyboardEventListener();
             this.unbindLabelEventListener();
             this.eventsBound = false;
         };
+        Toggle.prototype.bindFormResetListener = function () {
+            var form = this.element.form;
+            if (!form)
+                return;
+            form.addEventListener("reset", this.onFormReset);
+        };
+        Toggle.prototype.unbindFormResetListener = function () {
+            var form = this.element.form;
+            if (!form)
+                return;
+            form.removeEventListener("reset", this.onFormReset);
+        };
         /**
        * 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)
@@ -938,11 +1114,17 @@
        */
         Toggle.prototype.apply = function (action, silent) {
             if (silent === void 0) { silent = false; }
-            if (this.stateReducer.do(action)) {
+            if (!this.stateReducer.do(action))
+                return;
+            this.suppressExternalSync = true;
+            try {
                 this.domBuilder.render(this.stateReducer.get());
                 if (!silent)
                     this.trigger();
             }
+            finally {
+                this.suppressExternalSync = false;
+            }
         };
         /**
        * Toggles the state of the toggle.
@@ -1024,10 +1206,16 @@
        * @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();
+            this.suppressExternalSync = true;
+            try {
+                this.stateReducer.sync(this.element);
+                this.domBuilder.render(this.stateReducer.get());
+                if (!silent)
+                    this.trigger();
+            }
+            finally {
+                this.suppressExternalSync = false;
+            }
         };
         /**
        * Triggers the change event on the toggle's input element.
@@ -1045,6 +1233,7 @@
        *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.restoreInputProperties();
             this.unbindEventListeners();
             this.domBuilder.destroy();
             delete this.element.bsToggle;