bootstrap-checkbox-x - npm Package Compare versions

Comparing version 1.5.6 to 1.5.7

bower.json

 {
     "name": "bootstrap-checkbox-x",
-    "version": "1.5.6",
+    "version": "1.5.7",
     "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
@@ -5,0 +5,0 @@ "authors": [

CHANGE.md

 Change Log: `bootstrap-checkbox-x`
 ==================================
 
+## Version 1.5.7
+
+**Date**: 19-Sep-2021
+
+- (enh #59): Allow custom icon CSS for checked, unchecked and null states.
+- (enh #58): New boolean property `useCrossIcon` for checked indicator.
+- (enh #57): Revamp bootstrap checkbox-x markup for better styling & alignment across Bootstrap versions.
+    - New CSS class `.cbx-krajee` for the container markup to enclose all checkboxes with their labels
+    - Automated label and input vertical alignment for checkboxes
+- (enh #56): Enhancements to support all bootstrap versions (5.x, 4.x. and 3.x) enhancement
+- (enh #55): Use enhanced SVG icons
+
 ## Version 1.5.6
@@ -5,0 +17,0 @@

composer.json

 {
-    "name": "kartik-v/bootstrap-checkbox-x",
-    "description": "An extended checkbox plugin for bootstrap with three states and additional styles.",
-    "keywords": ["bootstrap", "checkbox", "jquery", "three", "state", "indeterminate", "null"],
-    "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
-    "license": "BSD-3-Clause",
-    "authors": [
-        {
-            "name": "Kartik Visweswaran",
-            "email": "[e-mail]",
-            "homepage": "http://www.krajee.com/"
-        }
-    ],
-    "autoload": {
-        "psr-4": {
-            "kartik\\plugins\\checkbox\\": ""
-        }
-    },
-    "extra": {
-        "branch-alias": {
-            "dev-master": "1.5.x-dev"
-        }
+  "name": "kartik-v/bootstrap-checkbox-x",
+  "description": "An extended checkbox plugin for bootstrap with three states and additional styles.",
+  "keywords": [
+    "bootstrap",
+    "checkbox",
+    "jquery",
+    "three",
+    "state",
+    "indeterminate",
+    "null"
+  ],
+  "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
+  "license": "BSD-3-Clause",
+  "authors": [
+    {
+      "name": "Kartik Visweswaran",
+      "email": "[e-mail]",
+      "homepage": "http://www.krajee.com/"
     }
+  ],
+  "autoload": {
+    "psr-4": {
+      "kartik\\plugins\\checkbox\\": ""
+    }
+  },
+  "extra": {
+    "branch-alias": {
+      "dev-master": "1.5.x-dev"
+    }
+  }
 }

js/checkbox-x.js

 /*!
  * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021
- * @version 1.5.6
+ * @version 1.5.7
  *
@@ -10,5 +10,29 @@ * An extended checkbox plugin for bootstrap with three states and additional styles.
  */
-(function ($) {
+(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && typeof module.exports === 'object') {
+        factory(require('jquery'));
+    } else {
+        factory(window.jQuery);
+    }
+}(function ($) {
     "use strict";
-    var CheckboxX = function (element, options) {
+
+    var $h, CheckboxX;
+
+    /**
+     * Global Helper
+     */
+    $h = {
+        CHECKED: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M13.485 1.431a1.473 1.473 0 012.104 2.062l-7.84 9.801a1.473 1.473 0 01-2.12.04L.431 8.138a1.473 1.473 0 012.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 01.04-.045z"></path></svg>',
+        CROSSED: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M1.293 1.293a1 1 0 011.414 0L8 6.586l5.293-5.293a1 1 0 111.414 1.414L9.414 8l5.293 5.293a1 1 0 01-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 01-1.414-1.414L6.586 8 1.293 2.707a1 1 0 010-1.414z"></path></svg>',
+        INDETERMINATE: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M0 2a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2z"></path></svg>'
+    };
+
+    /**
+     * CheckboxX Constructor
+     */
+    CheckboxX = function (element, options) {
         var self = this;
@@ -21,2 +45,5 @@ self.$element = $(element);
 
+    /**
+     * CheckboxX Prototype
+     */
     CheckboxX.prototype = {
@@ -31,2 +58,5 @@ constructor: CheckboxX,
             }
+            if (!options.iconChecked) {
+                options.iconChecked = options.useCrossIcon ? $h.CROSSED : $h.CHECKED
+            }
             self.options = options;
@@ -42,4 +72,3 @@ self.clearEvents();
                 $el.hide();
-            }
-            else {
+            } else {
                 self.$container.before($el).addClass(css).html(self.render()).append($el);
@@ -70,2 +99,5 @@ }
             }
+            if (options.enclosedLabel) {
+                self.$container.closest('.cbx-label').removeClass('cbx-enclosed').addClass('cbx-enclosed');
+            }
         },
@@ -168,7 +200,12 @@ initCheckbox: function () {
             var self = this, options = self.options, icon = options.iconUnchecked, $el = self.$element, val = $el.val(),
-                isInd = $el.is(':checkbox') ? $el.prop('indeterminate') :
-                    (val !== options.valueUnchecked && (self.options.threeState || hasThreeState));
-            return '<span class="cbx-icon">' +
-                (val === options.valueChecked ? options.iconChecked : (isInd ? options.iconNull : icon)) +
-                '</span>';
+                css = options.iconUncheckedCss, isInd = $el.is(':checkbox') ? $el.prop('indeterminate') :
+                (val !== options.valueUnchecked && (options.threeState || hasThreeState));
+            if (val === options.valueChecked) {
+                icon = options.iconChecked;
+                css = options.iconCheckedCss;
+            } else if (isInd) {
+                icon = options.iconNull
+                css = options.iconNullCss;
+            }
+            return '<span class="cbx-icon' + (css ? ' ' + css : '') + '">' + icon + '</span>';
         },
@@ -210,5 +247,9 @@ render: function () {
         inline: true,
-        iconChecked: '<i class="glyphicon glyphicon-ok"></i>',
-        iconUnchecked: ' ',
-        iconNull: '<div class="cbx-icon-null"></div>',
+        iconChecked: null,
+        iconUnchecked: '',
+        iconNull: $h.INDETERMINATE,
+        iconCheckedCss: '',
+        iconUncheckedCss: '',
+        iconNullCss: '',
+        useCrossIcon: false,
         valueChecked: '1',
@@ -231,2 +272,2 @@ valueUnchecked: '0',
     });
-})(window.jQuery);
+}));

js/checkbox-x.min.js

 /*!
  * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021
- * @version 1.5.6
+ * @version 1.5.7
  *
@@ -9,2 +9,2 @@ * An extended checkbox plugin for bootstrap with three states and additional styles.
  * For more Yii related demos visit http://demos.krajee.com
- */!function(e){"use strict";var n=function(n,t){var c=this;c.$element=e(n),c.disabled=c.$element.attr("disabled")||c.$element.attr("readonly"),c.initialValue=c.$element.val(),c.init(t)};n.prototype={constructor:n,init:function(n){var t=this,c=t.$element,i=c.is(":checkbox"),a=c.is("select"),o=!i&&!a,l=a&&!n.enclosedLabel,r=n.inline?"cbx-container":"cbx-container cbx-block";n.theme&&(r+=" cbx-"+n.theme),t.options=n,t.clearEvents(),c.removeClass("cbx-loading"),t.initCheckbox()&&(void 0===t.$container?(t.$container=e(document.createElement("div")).addClass(r).html(t.render()),t.$container.insertBefore(c).append(c),c.hide()):t.$container.before(c).addClass(r).html(t.render()).append(c),t.$cbx=t.$container.find(".cbx"),c.closest("form").on("reset.checkbox",function(){t.reset()}),t.$cbx.off("click.checkbox keyup.checkbox").on("click.checkbox",function(){return!i||n.enclosedLabel||n.useNative||t.disabled?void((o&&!n.enclosedLabel||l)&&t.change()):void c.trigger("change")}).on("keyup.checkbox",function(e){32===e.which&&(t.change(),e.preventDefault())}),(o||a)&&c.on("click.checkbox",function(){t.change()}))},initCheckbox:function(){var e,n=this,t=n.$element,c=n.options;return t.is(":checkbox")?(t.prop("checked")||(e=t.prop("indeterminate")?c.valueNull:c.valueUnchecked,t.val(e)),t.on("change.checkbox",function(){n.change()}),c.useNative?(t.removeClass("cbx-loading"),!1):!0):!0},change:function(){var e,n=this,t=n.$element;n.disabled||(e=n.getValue(),t.val(e),n.validateCheckbox(e),n.options.useNative||n.$cbx.html(n.getIndicator()))},getValue:function(){var e=this,n=e.$element.val(),t=e.options;switch(n){case t.valueUnchecked:return e.options.threeState?t.valueNull:t.valueChecked;case t.valueChecked:return t.valueUnchecked;default:return t.valueChecked}},setCheckboxProp:function(e){var n=this,t=n.$element,c=n.options;switch(t.prop("indeterminate",!1).prop("checked",!1),e){case c.valueChecked:t.prop("checked",!0);break;case c.valueUnchecked:break;default:c.threeState&&t.prop("indeterminate",!0)}},validateCheckbox:function(e){var n=this,t=n.$element,c=t.is(":checkbox");return c?void n.setCheckboxProp(e):void t.trigger("change")},clearEvents:function(){var e=this,n=e.$element,t=e.$container?e.$container.find(".cbx"):null;n.off(".checkbox"),t&&t.off(".checkbox")},destroy:function(){var e=this,n=e.$element;e.clearEvents(),e.$container.before(n).remove(),n.removeData().show()},reset:function(){var e=this,n=e.$element;n.val(e.initialValue),e.refresh(),n.trigger("checkbox:resetinput")},refresh:function(n){var t=this;n?t.init(e.extend(t.options,n)):(t.disabled=t.$element.attr("disabled")||t.$element.attr("readonly"),t.init(t.options)),t.initialValue=t.$element.val()},getIndicator:function(e){var n=this,t=n.options,c=t.iconUnchecked,i=n.$element,a=i.val(),o=i.is(":checkbox")?i.prop("indeterminate"):a!==t.valueUnchecked&&(n.options.threeState||e);return'<span class="cbx-icon">'+(a===t.valueChecked?t.iconChecked:o?t.iconNull:c)+"</span>"},render:function(){var e=this,n=e.options,t=e.getIndicator(n.allowThreeValOnInit),c=e.disabled||!n.tabindex?"":' tabindex="'+n.tabindex+'"',i=n.size,a="cbx cbx-"+i+(e.disabled?" cbx-disabled":" cbx-active");return'<div class="'+a+'"'+c+">"+t+"</div>"}},e.fn.checkboxX=function(t){var c=Array.apply(null,arguments),i=[];switch(c.shift(),this.each(function(){var a=e(this),o=a.data("checkboxX"),l="object"==typeof t&&t;o||(o=new n(this,e.extend(!0,{},e.fn.checkboxX.defaults,l,a.data())),a.data("checkboxX",o)),"string"==typeof t&&i.push(o[t].apply(o,c))}),i.length){case 0:return this;case 1:return i[0];default:return i}},e.fn.checkboxX.defaults={theme:"",threeState:!0,inline:!0,iconChecked:'<i class="glyphicon glyphicon-ok"></i>',iconUnchecked:" ",iconNull:'<div class="cbx-icon-null"></div>',valueChecked:"1",valueUnchecked:"0",valueNull:"",size:"md",enclosedLabel:!1,useNative:!1,allowThreeValOnInit:!1,tabindex:"1000"},e.fn.checkboxX.Constructor=n,e('input[data-toggle="checkbox-x"]').addClass("cbx-loading"),e(document).ready(function(){e('input[data-toggle="checkbox-x"]').checkboxX()})}(window.jQuery);
+ */!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):e("object"==typeof module&&"object"==typeof module.exports?require("jquery"):window.jQuery)}(function(e){"use strict";var n,t;n={CHECKED:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M13.485 1.431a1.473 1.473 0 012.104 2.062l-7.84 9.801a1.473 1.473 0 01-2.12.04L.431 8.138a1.473 1.473 0 012.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 01.04-.045z"></path></svg>',CROSSED:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M1.293 1.293a1 1 0 011.414 0L8 6.586l5.293-5.293a1 1 0 111.414 1.414L9.414 8l5.293 5.293a1 1 0 01-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 01-1.414-1.414L6.586 8 1.293 2.707a1 1 0 010-1.414z"></path></svg>',INDETERMINATE:'<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M0 2a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2z"></path></svg>'},t=function(n,t){var c=this;c.$element=e(n),c.disabled=c.$element.attr("disabled")||c.$element.attr("readonly"),c.initialValue=c.$element.val(),c.init(t)},t.prototype={constructor:t,init:function(t){var c=this,a=c.$element,o=a.is(":checkbox"),i=a.is("select"),l=!o&&!i,s=i&&!t.enclosedLabel,r=t.inline?"cbx-container":"cbx-container cbx-block";t.theme&&(r+=" cbx-"+t.theme),t.iconChecked||(t.iconChecked=t.useCrossIcon?n.CROSSED:n.CHECKED),c.options=t,c.clearEvents(),a.removeClass("cbx-loading"),c.initCheckbox()&&(void 0===c.$container?(c.$container=e(document.createElement("div")).addClass(r).html(c.render()),c.$container.insertBefore(a).append(a),a.hide()):c.$container.before(a).addClass(r).html(c.render()).append(a),c.$cbx=c.$container.find(".cbx"),a.closest("form").on("reset.checkbox",function(){c.reset()}),c.$cbx.off("click.checkbox keyup.checkbox").on("click.checkbox",function(){return!o||t.enclosedLabel||t.useNative||c.disabled?void((l&&!t.enclosedLabel||s)&&c.change()):void a.trigger("change")}).on("keyup.checkbox",function(e){32===e.which&&(c.change(),e.preventDefault())}),(l||i)&&a.on("click.checkbox",function(){c.change()}),t.enclosedLabel&&c.$container.closest(".cbx-label").removeClass("cbx-enclosed").addClass("cbx-enclosed"))},initCheckbox:function(){var e,n=this,t=n.$element,c=n.options;return t.is(":checkbox")?(t.prop("checked")||(e=t.prop("indeterminate")?c.valueNull:c.valueUnchecked,t.val(e)),t.on("change.checkbox",function(){n.change()}),c.useNative?(t.removeClass("cbx-loading"),!1):!0):!0},change:function(){var e,n=this,t=n.$element;n.disabled||(e=n.getValue(),t.val(e),n.validateCheckbox(e),n.options.useNative||n.$cbx.html(n.getIndicator()))},getValue:function(){var e=this,n=e.$element.val(),t=e.options;switch(n){case t.valueUnchecked:return e.options.threeState?t.valueNull:t.valueChecked;case t.valueChecked:return t.valueUnchecked;default:return t.valueChecked}},setCheckboxProp:function(e){var n=this,t=n.$element,c=n.options;switch(t.prop("indeterminate",!1).prop("checked",!1),e){case c.valueChecked:t.prop("checked",!0);break;case c.valueUnchecked:break;default:c.threeState&&t.prop("indeterminate",!0)}},validateCheckbox:function(e){var n=this,t=n.$element,c=t.is(":checkbox");return c?void n.setCheckboxProp(e):void t.trigger("change")},clearEvents:function(){var e=this,n=e.$element,t=e.$container?e.$container.find(".cbx"):null;n.off(".checkbox"),t&&t.off(".checkbox")},destroy:function(){var e=this,n=e.$element;e.clearEvents(),e.$container.before(n).remove(),n.removeData().show()},reset:function(){var e=this,n=e.$element;n.val(e.initialValue),e.refresh(),n.trigger("checkbox:resetinput")},refresh:function(n){var t=this;n?t.init(e.extend(t.options,n)):(t.disabled=t.$element.attr("disabled")||t.$element.attr("readonly"),t.init(t.options)),t.initialValue=t.$element.val()},getIndicator:function(e){var n=this,t=n.options,c=t.iconUnchecked,a=n.$element,o=a.val(),i=t.iconUncheckedCss,l=a.is(":checkbox")?a.prop("indeterminate"):o!==t.valueUnchecked&&(t.threeState||e);return o===t.valueChecked?(c=t.iconChecked,i=t.iconCheckedCss):l&&(c=t.iconNull,i=t.iconNullCss),'<span class="cbx-icon'+(i?" "+i:"")+'">'+c+"</span>"},render:function(){var e=this,n=e.options,t=e.getIndicator(n.allowThreeValOnInit),c=e.disabled||!n.tabindex?"":' tabindex="'+n.tabindex+'"',a=n.size,o="cbx cbx-"+a+(e.disabled?" cbx-disabled":" cbx-active");return'<div class="'+o+'"'+c+">"+t+"</div>"}},e.fn.checkboxX=function(n){var c=Array.apply(null,arguments),a=[];switch(c.shift(),this.each(function(){var o=e(this),i=o.data("checkboxX"),l="object"==typeof n&&n;i||(i=new t(this,e.extend(!0,{},e.fn.checkboxX.defaults,l,o.data())),o.data("checkboxX",i)),"string"==typeof n&&a.push(i[n].apply(i,c))}),a.length){case 0:return this;case 1:return a[0];default:return a}},e.fn.checkboxX.defaults={theme:"",threeState:!0,inline:!0,iconChecked:null,iconUnchecked:"",iconNull:n.INDETERMINATE,iconCheckedCss:"",iconUncheckedCss:"",iconNullCss:"",useCrossIcon:!1,valueChecked:"1",valueUnchecked:"0",valueNull:"",size:"md",enclosedLabel:!1,useNative:!1,allowThreeValOnInit:!1,tabindex:"1000"},e.fn.checkboxX.Constructor=t,e('input[data-toggle="checkbox-x"]').addClass("cbx-loading"),e(document).ready(function(){e('input[data-toggle="checkbox-x"]').checkboxX()})});

package.json

 {
-    "name": "bootstrap-checkbox-x",
-    "version": "1.5.6",
-    "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
-    "author": "Kartik Visweswaran <[e-mail]>",
-    "description": "An extended checkbox plugin for bootstrap with three states and additional styles.",
-    "bugs": {
-        "url": "https://github.com/kartik-v/bootstrap-checkbox-x/issues"
-    },
-    "style": "./css/checkbox-x.min.css",
-    "main": "./js/checkbox-x.min.js",
-    "keywords": [
-        "bootstrap",
-        "checkbox",
-        "jquery",
-        "three",
-        "state",
-        "indeterminate",
-        "null"
-    ],
-    "repository" : {
-        "type": "git", 
-        "url": "https://github.com/kartik-v/bootstrap-checkbox-x.git"
-    },
-    "dependencies": {
-        "jquery": ">= 1.9.0",
-        "bootstrap": ">= 3.0.0"
-    },
-    "license": "BSD-3-Clause"
+  "name": "bootstrap-checkbox-x",
+  "version": "1.5.7",
+  "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x",
+  "author": "Kartik Visweswaran <[e-mail]>",
+  "description": "An extended checkbox plugin for bootstrap with three states and additional styles.",
+  "bugs": {
+    "url": "https://github.com/kartik-v/bootstrap-checkbox-x/issues"
+  },
+  "style": "./css/checkbox-x.min.css",
+  "main": "./js/checkbox-x.min.js",
+  "keywords": [
+    "bootstrap",
+    "checkbox",
+    "jquery",
+    "three",
+    "state",
+    "indeterminate",
+    "null"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kartik-v/bootstrap-checkbox-x.git"
+  },
+  "dependencies": {
+    "jquery": ">= 1.9.0",
+    "bootstrap": ">= 3.0.0"
+  },
+  "license": "BSD-3-Clause"
 }

README.md

@@ -9,10 +9,11 @@ <h1 align="center">
     <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU"
-       title="Donate via Paypal" target="_blank">
-        <img src="http://kartik-v.github.io/bootstrap-fileinput-samples/samples/donate.png" alt="Donate"/>
-    </a>
+       title="Donate via Paypal" target="_blank"><img src="https://kartik-v.github.io/bootstrap-fileinput-samples/samples/donate.png" height="60" alt="Donate"/></a>
+    &nbsp; &nbsp; &nbsp;
+    <a href="https://www.buymeacoffee.com/kartikv" title="Buy me a coffee" ><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="60" alt="kartikv" /></a>
 </h1>
 
+<div align="center">
+
 [![Bower version](https://badge.fury.io/bo/bootstrap-checkbox-x.svg)](http://badge.fury.io/bo/bootstrap-checkbox-x)
-[![Stable Version](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
-[![Unstable Version](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/v/unstable)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
+[![Latest Stable Version](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
 [![License](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/license)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
@@ -22,2 +23,4 @@ [![Packagist Downloads](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/downloads)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x)
 
+</div>
+
 An extended checkbox plugin for Bootstrap built using JQuery, which allows three checkbox states and includes additional styles. The plugin uses Bootstrap markup and CSS 3 styling by default, but it can be overridden with any other CSS markup. It also helps you to fallback to a native checkbox OR display native checkboxes with tristate capability. 
@@ -37,3 +40,3 @@
 3. You can set the plugin to allow **three states** or the default **two states** for the checkbox.
-4. Specifically uses Bootstrap 3.x styles & glyphs. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes.
+4. Specifically uses Bootstrap 5.x or 4.x or 3.x styles. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes.
 5. Special CSS 3 styling, to enhance the control to look like any Bootstrap 3 form control. Supports the `has-error`, `has-success`, `has-warning`
@@ -52,3 +55,3 @@ styling states like other Bootstrap form-controls.
 
-> NOTE: The latest version of the plugin v1.5.6 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/CHANGE.md) for details.
+> NOTE: The latest version of the plugin v1.5.7 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/CHANGE.md) for details.
 
@@ -61,3 +64,3 @@ ## Documentation and Demo
 
-1. [Bootstrap 3.x](http://getbootstrap.com/)
+1. [Bootstrap 5.x or 4.x or 3.x](http://getbootstrap.com/)
 2. Latest [JQuery](http://jquery.com/)
@@ -95,8 +98,8 @@ 3. Most browsers supporting CSS3 & JQuery.
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.6/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.6/js/checkbox-x.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/js/checkbox-x.min.js"></script>
 <!-- optional if you are using themes -->
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.6/css/theme-krajee-flatblue.min.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/theme-krajee-flatblue.min.css" media="all" rel="stylesheet" type="text/css" />
 ```
@@ -109,3 +112,3 @@
 ```html
-<input id="input-id" value="1" data-toggle="checkbox-x" data-three-state="true" data-size="lg" >
+<input type="checkbox" id="input-id" value="1" checked data-toggle="checkbox-x" data-three-state="true" data-size="lg" >
 ```
@@ -116,3 +119,10 @@
 ```html
-<input id="input-id">
+<!-- enclose the checkbox input & label in container with class `cbx-krajee`
+  -- and also add the `cbx-label` class to your checkbox labels -->
+
+<div class="cbx-krajee">
+   <input id="input-id" type="checkbox" value="1" checked>
+   <label for="input-id" class="cbx-label"></label>
+</div>
+
 <script>
@@ -133,3 +143,3 @@ $(document).on("ready", function() {
 
-> **Note:** You can add the CSS class `cbx-label` to the labels for your checkbox inputs to style them similar to bootstrap's checkbox labels (with additional enhancements for contextual colors).
+> **Note:** You should wrap the input and label in a container with CSS class `cbx-krajee` for better alignment. You should also add the CSS class `cbx-label` to the labels for your checkbox inputs to style them similar to bootstrap's checkbox labels (which includes additional enhancements for contextual colors).
 
@@ -136,0 +146,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

167772

increased by100.68%

Number of package files

22

increased by10%

Lines of code

615

increased by1.82%

Number of lines in readme file

139

increased by7.75%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes