@carry0987/check-box - npm Package Compare versions

Comparing version 2.0.6 to 2.0.7

dist/checkBox.d.ts

@@ -0,1 +1,3 @@
+type CheckAllButtons = string | HTMLInputElement | Array<string | HTMLInputElement> | null;
+
 interface OnChangeCallback {
@@ -10,3 +12,3 @@ (total: TotalCheckbox, target?: HTMLInputElement): void;
     checkMark: string;
-    checkAll: string | null;
+    checkAll: CheckAllButtons;
     bindLabel: boolean;
@@ -38,3 +40,4 @@ styles: object;
     private total;
-    private checkAllElement?;
+    private checkAllElement;
+    private lastChecked;
     private onChangeCallback?;
@@ -47,8 +50,10 @@ private onCheckAllCallback?;
     private processCheckbox;
-    private updateCheckboxCheckedStatus;
-    private setupCheckAll;
+    private updateCheckboxStatus;
+    private processCheckAll;
     private checkBoxChange;
+    private checkAllChange;
     private updateTotal;
     private updateCheckAllStatus;
     private dispatchCheckboxChangeEvent;
+    private handleShiftClick;
     private destroy;
@@ -55,0 +60,0 @@ set onChange(callback: OnChangeCallback);

dist/checkBox.esm.js

@@ -193,2 +193,24 @@ function reportError(...error) {
     }
+    static getCheckAllElements(ele) {
+        if (!ele)
+            return [];
+        let checkAllElements = [];
+        if (Array.isArray(ele)) {
+            ele.forEach(elem => {
+                if (typeof elem === 'string') {
+                    checkAllElements.push(...Utils.getElem(elem, 'all'));
+                }
+                else if (elem instanceof HTMLInputElement) {
+                    checkAllElements.push(elem);
+                }
+            });
+        }
+        else if (typeof ele === 'string') {
+            checkAllElements.push(...Utils.getElem(ele, 'all'));
+        }
+        else if (ele instanceof HTMLInputElement) {
+            checkAllElements.push(ele);
+        }
+        return checkAllElements.filter(elem => elem !== null);
+    }
     static handleCheckboxTitle(ele, labelSibling) {
@@ -238,2 +260,7 @@ let title = ele.title || ele.dataset.checkboxTitle || null;
             cloneEle.click();
+            // Dispatch a custom event when the shift key is pressed
+            if (e.shiftKey) {
+                let event = Utils.createEvent('shift-click', { detail: { checkedElement: cloneEle } });
+                Utils.dispatchEvent(event, cloneEle);
+            }
         });
@@ -258,2 +285,7 @@ if (checkmarkNode.parentNode) {
                     cloneEle.click();
+                    // Dispatch a custom event when the shift key is pressed
+                    if (e.shiftKey) {
+                        let event = Utils.createEvent('shift-click', { detail: { checkedElement: cloneEle } });
+                        Utils.dispatchEvent(event, cloneEle);
+                    }
                 });
@@ -273,12 +305,13 @@ }
     }
-    static toggleCheckAll(ele, total) {
-        let checkAll = getElem(ele);
-        if (!checkAll)
+    static toggleCheckAll(eles, total) {
+        if (eles.length === 0)
             return;
-        if (total && total.checked && total.input) {
-            Utils.toggleCheckStatus(checkAll, (total.checked.length !== total.input.length || total.checked.length === 0) === false);
-        }
-        else {
-            Utils.toggleCheckStatus(checkAll, false);
-        }
+        eles.forEach(ele => {
+            if (!total || !total.checked || !total.input) {
+                Utils.toggleCheckStatus(ele, false);
+                return;
+            }
+            const allChecked = total.checked.length === total.input.length && total.checked.length !== 0;
+            Utils.toggleCheckStatus(ele, allChecked);
+        });
     }
@@ -289,2 +322,5 @@ static restoreElement(element) {
         }
+        if (typeof element.checkAllChange === 'function') {
+            element.removeEventListener('change', element.checkAllChange);
+        }
         if (element.withID === false) {
@@ -362,3 +398,3 @@ element.removeAttribute('id');
     static instances = [];
-    static version = '2.0.6';
+    static version = '2.0.7';
     static firstLoad = true;
@@ -370,3 +406,4 @@ element = null;
     total = { input: [], checked: [], list: [] };
-    checkAllElement;
+    checkAllElement = [];
+    lastChecked = null;
     // Methods for external use
@@ -399,3 +436,3 @@ onChangeCallback;
         if (this.options.checkAll) {
-            this.setupCheckAll();
+            this.processCheckAll();
         }
@@ -445,3 +482,3 @@ return this;
                 // Initialize checkbox checked status based on options
-                this.updateCheckboxCheckedStatus(ele, index);
+                this.updateCheckboxStatus(ele, index);
             }
@@ -454,5 +491,11 @@ }
         // Add event listener
-        let checkBoxChange = this.checkBoxChange.bind(this, true, cloneEle);
+        let checkBoxChange = this.checkBoxChange.bind(this, true, cloneEle, undefined);
         cloneEle.addEventListener('change', checkBoxChange);
         cloneEle.checkBoxChange = checkBoxChange;
+        // Add event listener for shift-click
+        // cloneEle.addEventListener('shift-click', (e: Event) => this.handleShiftClick(cloneEle));
+        // if (!this.lastChecked) {
+        //     this.lastChecked = cloneEle.checked ? cloneEle : null;
+        // }
+        // Store the cloned checkbox
         this.allElement.push(cloneEle);
@@ -462,3 +505,3 @@ // Store label
     }
-    updateCheckboxCheckedStatus(ele, index) {
+    updateCheckboxStatus(ele, index) {
         // Logic to determine if a checkbox should be checked based on the provided options
@@ -481,52 +524,40 @@ const checkedOption = this.options.checked;
     }
-    setupCheckAll() {
+    processCheckAll() {
         // Retrieve the check all element
-        if (this.options.checkAll === null)
+        const checkAllElements = Utils.getCheckAllElements(this.options.checkAll);
+        if (checkAllElements.length === 0)
             return;
-        const checkAll = Utils.getElem(this.options.checkAll);
-        if (!checkAll || checkAll.type !== 'checkbox')
-            return;
-        if (checkAll.hasAttribute('data-checkbox'))
-            return;
-        checkAll.setAttribute('data-checkbox', 'true');
-        // Handle the label associated with the check all checkbox
-        const labelSibling = checkAll.nextElementSibling;
-        let { title, remainLabel, randomID, labelToRestore } = Utils.handleCheckboxTitle(checkAll, labelSibling);
-        // If a title has been found and is true, retrieve the label's content
-        if (title && labelSibling && labelSibling.tagName === 'LABEL') {
-            title = labelSibling.textContent || title;
-            labelSibling.parentNode?.removeChild(labelSibling);
-        }
-        // Insert the check all checkbox template
-        const { cloneEle, templateNode, labelNode } = Utils.insertCheckbox(this.id.toString(), checkAll, randomID, remainLabel);
-        // Replace the original checkbox with the new template
-        checkAll.parentNode?.replaceChild(templateNode.firstElementChild || templateNode, checkAll);
-        // Insert the title for the check all checkbox
-        Utils.insertCheckboxTitle(title, this.options.bindLabel ?? false, labelNode, cloneEle);
-        // Attach the change event listener to the cloned checkbox
-        const checkAllChange = (e) => {
-            if (!(e.target instanceof HTMLInputElement))
+        checkAllElements.forEach(checkAll => {
+            if (!checkAll || checkAll.type !== 'checkbox')
                 return;
-            const checkedAll = e.target.checked;
-            // Toggle the status for all checkboxes
-            this.allElement.forEach((checkbox) => {
-                Utils.toggleCheckStatus(checkbox, checkedAll);
-            });
-            // Update the check all status and invoke the callback
-            this.checkBoxChange(false);
-            if (this.onCheckAllCallback)
-                this.onCheckAllCallback(checkedAll);
-        };
-        cloneEle.addEventListener('change', checkAllChange);
-        cloneEle.checkAllChange = checkAllChange;
-        cloneEle.labelToRestore = labelToRestore;
-        // Update the stored check all element property
-        this.checkAllElement = cloneEle;
-        // Set the initial check status based on provided options
-        if (this.options.checked === true || checkAll.checked) {
-            Utils.toggleCheckStatus(cloneEle, true);
-            cloneEle.dispatchEvent(new Event('change'));
-        }
+            if (checkAll.hasAttribute('data-checkbox'))
+                return;
+            checkAll.setAttribute('data-checkbox', 'true');
+            // Handle the label associated with the check all checkbox
+            const labelSibling = checkAll.nextElementSibling;
+            let { title, remainLabel, randomID, labelToRestore } = Utils.handleCheckboxTitle(checkAll, labelSibling);
+            // If a title has been found and is true, retrieve the label's content
+            if (title && labelSibling && labelSibling.tagName === 'LABEL') {
+                title = labelSibling.textContent || title;
+                labelSibling.parentNode?.removeChild(labelSibling);
+            }
+            // Insert the check all checkbox template
+            const { cloneEle, templateNode, labelNode } = Utils.insertCheckbox(this.id.toString(), checkAll, randomID, remainLabel);
+            // Replace the original checkbox with the new template
+            checkAll.parentNode?.replaceChild(templateNode.firstElementChild || templateNode, checkAll);
+            // Insert the title for the check all checkbox
+            Utils.insertCheckboxTitle(title, this.options.bindLabel ?? false, labelNode, cloneEle);
+            cloneEle.addEventListener('change', this.checkAllChange);
+            cloneEle.checkAllChange = this.checkAllChange;
+            cloneEle.labelToRestore = labelToRestore;
+            // Store the cloned check all checkbox
+            this.checkAllElement.push(cloneEle);
+            // Set the initial check status based on provided options
+            if (this.options.checked === true || checkAll.checked) {
+                Utils.toggleCheckStatus(cloneEle, true);
+                cloneEle.dispatchEvent(new Event('change'));
+            }
+        });
     }
-    checkBoxChange(toggleCheckAll, target) {
+    checkBoxChange(toggleCheckAll, target, checkStatus) {
         this.updateTotal();
@@ -538,6 +569,23 @@ if (toggleCheckAll) {
         if (target) {
-            Utils.toggleCheckStatus(target, target.checked);
+            Utils.toggleCheckStatus(target, checkStatus ?? target.checked);
+            // this.lastChecked = (target.checked) ? target : null;
         }
         this.dispatchCheckboxChangeEvent();
     }
+    checkAllChange = (e) => {
+        if (!(e.target instanceof HTMLInputElement))
+            return;
+        const checkedAll = e.target.checked;
+        // Toggle the status for all checkboxes
+        this.allElement.forEach((checkbox) => {
+            Utils.toggleCheckStatus(checkbox, checkedAll);
+        });
+        // Update the total and check all status
+        this.updateTotal();
+        this.updateCheckAllStatus();
+        // Update the check all status and invoke the callback
+        this.checkBoxChange(false);
+        if (this.onCheckAllCallback)
+            this.onCheckAllCallback(checkedAll);
+    };
     updateTotal() {
@@ -557,7 +605,9 @@ const total = this.total;
     updateCheckAllStatus() {
-        if (this.checkAllElement) {
+        if (this.checkAllElement.length > 0) {
             const totalChecked = this.total.checked.length;
             const totalInputs = this.total.input.length;
             const isAllChecked = totalChecked === totalInputs;
-            Utils.toggleCheckStatus(this.checkAllElement, isAllChecked);
+            this.checkAllElement.forEach((checkAll) => {
+                Utils.toggleCheckStatus(checkAll, isAllChecked);
+            });
         }
@@ -569,2 +619,17 @@ }
     }
+    handleShiftClick(target) {
+        if (!this.lastChecked) {
+            this.checkBoxChange(false, target);
+            return;
+        }
+        let start = this.allElement.indexOf(this.lastChecked);
+        let end = this.allElement.indexOf(target);
+        let from = Math.min(start, end);
+        let to = Math.max(start, end);
+        // Use this.lastChecked.checked to determine the state to apply between the range
+        for (let i = from; i <= to; i++) {
+            this.checkBoxChange(true, this.allElement[i], this.lastChecked.checked);
+        }
+        this.lastChecked = target; // Update the last checked item to current target
+    }
     destroy() {
@@ -578,5 +643,9 @@ // Reset firstLoad flag
         // Clear the checkAll event if it exists
-        if (this.checkAllElement && this.checkAllElement.checkAllChange) {
-            Utils.toggleCheckAll(this.checkAllElement);
-            Utils.restoreElement(this.checkAllElement);
+        if (this.checkAllElement.length > 0) {
+            this.checkAllElement.forEach((checkAll) => {
+                if (checkAll.checkAllChange) {
+                    Utils.toggleCheckAll(this.checkAllElement);
+                    Utils.restoreElement(checkAll);
+                }
+            });
         }
@@ -588,3 +657,3 @@ // Reset instance variables
         this.total = { input: [], checked: [], list: [] };
-        this.checkAllElement = undefined;
+        this.checkAllElement = [];
         // Remove any injected stylesheets
@@ -591,0 +660,0 @@ Utils.removeStylesheet(this.id.toString());

dist/checkBox.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).CheckBox=t()}(this,(function(){"use strict";function e(...e){console.error(...e)}function t(e){throw new Error(e)}var n=Object.freeze({__proto__:null,reportError:e,throwError:t});function l(e,t,n){if("string"!=typeof e)return e;let l=document;return null===t&&n?l=n:t&&t instanceof Node&&"querySelector"in t?l=t:n&&n instanceof Node&&"querySelector"in n&&(l=n),"all"===t?l.querySelectorAll(e):l.querySelector(e)}function c(e,t={},n=""){let l=document.createElement(e);for(let e in t)Object.prototype.hasOwnProperty.call(t,e)&&("textContent"===e||"innerText"===e?l.textContent=t[e]:l.setAttribute(e,t[e]));return n&&(l.textContent=n),l}let o="utils-style";const i={from:".utils",to:".utils-"};function s(e,...t){if(!t.length)return e;const n=t.shift();if(n)for(const t in n)if(Object.prototype.hasOwnProperty.call(n,t)){const c=n[t],o=t;"object"!=typeof(l=c)||null===l||Array.isArray(l)?e[o]=c:(e[o]&&"object"==typeof e[o]||(e[o]={}),s(e[o],c))}var l;return s(e,...t)}function a(e){o=e}function h(e,t){i.from=e,i.to=t}function r(e,t=null){t=p(t)?"":t;let n=c("style");n.id=o+t,n.textContent="",document.head.append(n);let l=n.sheet;for(let n in e)e.hasOwnProperty(n)&&u(l,n,d(e[n]),t)}function d(e){let t="";for(let[n,l]of Object.entries(e))n=n.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t+=`${n}:${l};`;return t}function u(e,t,n,l=null){l=p(l)?"":l;let c=t.replace(i.from,i.to+l);e.insertRule(c+"{"+n+"}",0)}function k(e=null){const t=p(e)?"":e;let n=l("#"+o+t);n&&n.parentNode&&n.parentNode.removeChild(n)}function p(e){return"number"!=typeof e&&(!e||"string"==typeof e&&0===e.length)}function b(e=8){return Math.random().toString(36).substring(2,2+e)}function g(e,t,n){return new CustomEvent(e,{detail:t,...n})}var m=Object.freeze({__proto__:null,addEventListener:function(e,t,n,l){e.addEventListener(t,n,l)},createEvent:g,dispatchEvent:function(n,l=document,c,o){try{if("string"==typeof n){let e=g(n,c,o);return l.dispatchEvent(e)}if(n instanceof Event)return l.dispatchEvent(n);t("Invalid event type")}catch(t){return e("Dispatch Event Error:",t),!1}},removeEventListener:function(e,t,n,l){e.removeEventListener(t,n,l)}});class C{static throwError=n.throwError;static getElem=l;static deepMerge=s;static generateRandom=b;static injectStylesheet=r;static removeStylesheet=k;static setStylesheetId=a;static setReplaceRule=h;static isEmpty=p;static createEvent=m.createEvent;static dispatchEvent=m.dispatchEvent;static getTemplate(e){return`\n        <div class="checkbox check-box-${e=e.toString()}">\n            <span class="checkmark"></span>\n            <label class="checkbox-label"></label>\n        </div>\n        `}static handleCheckboxTitle(e,t){let n,l=e.title||e.dataset.checkboxTitle||null,c=!1,o=null,i=!1;if(t instanceof HTMLLabelElement){const s=t.htmlFor,a=t.dataset.checkboxFor,h=e.dataset.checkboxId;c=!C.isEmpty(e.id)&&s===e.id,i=!C.isEmpty(e.id)&&a===e.id,C.isEmpty(h)||a!==h||(o=C.isEmpty(e.id)&&C.isEmpty(s)?"check-"+C.generateRandom(6):null,i=!0),(i||c)&&(n=t.cloneNode(!0),l=l||t.textContent,t.parentNode.removeChild(t))}return{title:l,remainLabel:c,randomID:o,labelToRestore:n}}static insertCheckbox(e,t,n,o){let i=C.getTemplate(e),s=c("div");s.innerHTML=i.trim();let a=l(".checkmark",s),h=l("label",s),r=t.cloneNode(!0);return r.withID=!0,n&&(r.id=n,r.withID=!1),!0===o&&(h.htmlFor=r.id),a.addEventListener("click",(e=>{e.preventDefault(),r.click()})),a.parentNode&&a.parentNode.insertBefore(r,a),t.parentNode.replaceChild(s.firstElementChild||s,t),{cloneEle:r,templateNode:s,labelNode:h}}static insertCheckboxTitle(e,t,n,l){e?(n.textContent=e,!0===t&&(n.classList.add("checkbox-labeled"),n.addEventListener("click",(e=>{e.preventDefault(),l.click()})))):n.parentNode.removeChild(n)}static toggleCheckStatus(e,t){t?(e.checked=!0,e.setAttribute("checked","checked")):(e.checked=!1,e.removeAttribute("checked"))}static toggleCheckAll(e,t){let n=l(e);n&&(t&&t.checked&&t.input?C.toggleCheckStatus(n,!1==(t.checked.length!==t.input.length||0===t.checked.length)):C.toggleCheckStatus(n,!1))}static restoreElement(e){if("function"==typeof e.checkBoxChange&&e.removeEventListener("change",e.checkBoxChange),!1===e.withID&&e.removeAttribute("id"),e.checkBoxChange=void 0,e.removeAttribute("data-checkbox"),e.parentNode){e.parentNode.replaceWith(e)}let t=e.labelToRestore;t&&t.nodeType===Node.ELEMENT_NODE&&e.parentNode?.insertBefore(t,e.nextSibling)}}C.setStylesheetId("checkbox-style"),C.setReplaceRule(".check-box",".check-box-");const f={checked:null,checkMark:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4=",checkAll:null,bindLabel:!0,styles:{},onChange:()=>{},onCheckAll:()=>{}};class E{static instances=[];static version="2.0.6";static firstLoad=!0;element=null;options=f;id=0;allElement=[];total={input:[],checked:[],list:[]};checkAllElement;onChangeCallback;onCheckAllCallback;constructor(e,t){this.init(e,t,E.instances.length),E.instances.push(this),1===E.instances.length&&!0===E.firstLoad&&((e,t=!1)=>{!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)})(`CheckBox is loaded, version: ${E.version}`),E.firstLoad=!1}init(e,t,n){let l=C.getElem(e,"all");return(!l||l.length<1)&&C.throwError("Cannot find elements : "+e),this.id=n,this.element=e,this.options=C.deepMerge({},this.options,t),this.injectStyles(),this.setupCallbacks(),l.forEach(((e,t)=>this.processCheckbox(e,t))),this.options.checkAll&&this.setupCheckAll(),this}injectStyles(){let e={};this.options?.checkMark&&(e={".check-box input[type=checkbox] + .checkmark:after":{"background-image":"url("+this.options.checkMark+")"}}),this.options?.styles&&Object.keys(this.options.styles).length>0&&(e=C.deepMerge({},this.options.styles,e)),e&&C.injectStylesheet(e,this.id.toString())}setupCallbacks(){this.onChange=(e,t)=>{this.options?.onChange&&this.options.onChange(e,t)},this.onCheckAll=e=>{this.options?.onCheckAll&&this.options.onCheckAll(e)}}processCheckbox(e,t){if("checkbox"!==e.type)return;if(e.hasAttribute("data-checkbox"))return;e.setAttribute("data-checkbox","true");let n=e.nextElementSibling,l=this.options.bindLabel??!1,{title:c,remainLabel:o,randomID:i,labelToRestore:s}=C.handleCheckboxTitle(e,n);l=!!o||l,e.checked?C.toggleCheckStatus(e,!0):this.options.checked&&this.updateCheckboxCheckedStatus(e,t);let{cloneEle:a,labelNode:h}=C.insertCheckbox(this.id.toString(),e,i,o);C.insertCheckboxTitle(c,l,h,a);let r=this.checkBoxChange.bind(this,!0,a);a.addEventListener("change",r),a.checkBoxChange=r,this.allElement.push(a),a.labelToRestore=s}updateCheckboxCheckedStatus(e,t){const n=this.options.checked;"boolean"==typeof n?C.toggleCheckStatus(e,n):"string"==typeof n||"number"==typeof n?e.value!==n.toString()&&t!==Number(n)||C.toggleCheckStatus(e,!0):Array.isArray(n)&&n.includes(e.value)&&C.toggleCheckStatus(e,!0)}setupCheckAll(){if(null===this.options.checkAll)return;const e=C.getElem(this.options.checkAll);if(!e||"checkbox"!==e.type)return;if(e.hasAttribute("data-checkbox"))return;e.setAttribute("data-checkbox","true");const t=e.nextElementSibling;let{title:n,remainLabel:l,randomID:c,labelToRestore:o}=C.handleCheckboxTitle(e,t);n&&t&&"LABEL"===t.tagName&&(n=t.textContent||n,t.parentNode?.removeChild(t));const{cloneEle:i,templateNode:s,labelNode:a}=C.insertCheckbox(this.id.toString(),e,c,l);e.parentNode?.replaceChild(s.firstElementChild||s,e),C.insertCheckboxTitle(n,this.options.bindLabel??!1,a,i);const h=e=>{if(!(e.target instanceof HTMLInputElement))return;const t=e.target.checked;this.allElement.forEach((e=>{C.toggleCheckStatus(e,t)})),this.checkBoxChange(!1),this.onCheckAllCallback&&this.onCheckAllCallback(t)};i.addEventListener("change",h),i.checkAllChange=h,i.labelToRestore=o,this.checkAllElement=i,(!0===this.options.checked||e.checked)&&(C.toggleCheckStatus(i,!0),i.dispatchEvent(new Event("change")))}checkBoxChange(e,t){this.updateTotal(),e&&this.updateCheckAllStatus(),this.onChangeCallback?.(this.total,t),t&&C.toggleCheckStatus(t,t.checked),this.dispatchCheckboxChangeEvent()}updateTotal(){const e=this.total;e.list=[],e.input=[],e.checked=[],this.allElement.forEach((t=>{e.input.push(t),t.checked&&(e.list.push(t.value),e.checked.push(t))}))}updateCheckAllStatus(){if(this.checkAllElement){const e=this.total.checked.length===this.total.input.length;C.toggleCheckStatus(this.checkAllElement,e)}}dispatchCheckboxChangeEvent(){const e=C.createEvent("checkbox-change",{detail:this.total});C.dispatchEvent(e)}destroy(){E.firstLoad=!1,this.allElement.forEach((e=>{C.restoreElement(e)})),this.checkAllElement&&this.checkAllElement.checkAllChange&&(C.toggleCheckAll(this.checkAllElement),C.restoreElement(this.checkAllElement)),this.element=null,this.options=f,this.allElement=[],this.total={input:[],checked:[],list:[]},this.checkAllElement=void 0,C.removeStylesheet(this.id.toString());const e=E.instances.indexOf(this);-1!==e&&E.instances.splice(e,1)}set onChange(e){this.onChangeCallback=e}set onCheckAll(e){this.onCheckAllCallback=e}get elements(){return this.allElement}getCheckBox(){return this.total}refresh(){this.element&&this.init(this.element,this.options,this.id)}static destroyAll(){for(;E.instances.length;){E.instances[0].destroy()}}}return E}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).CheckBox=t()}(this,(function(){"use strict";function e(...e){console.error(...e)}function t(e){throw new Error(e)}var n=Object.freeze({__proto__:null,reportError:e,throwError:t});function l(e,t,n){if("string"!=typeof e)return e;let l=document;return null===t&&n?l=n:t&&t instanceof Node&&"querySelector"in t?l=t:n&&n instanceof Node&&"querySelector"in n&&(l=n),"all"===t?l.querySelectorAll(e):l.querySelector(e)}function c(e,t={},n=""){let l=document.createElement(e);for(let e in t)Object.prototype.hasOwnProperty.call(t,e)&&("textContent"===e||"innerText"===e?l.textContent=t[e]:l.setAttribute(e,t[e]));return n&&(l.textContent=n),l}let i="utils-style";const o={from:".utils",to:".utils-"};function s(e,...t){if(!t.length)return e;const n=t.shift();if(n)for(const t in n)if(Object.prototype.hasOwnProperty.call(n,t)){const c=n[t],i=t;"object"!=typeof(l=c)||null===l||Array.isArray(l)?e[i]=c:(e[i]&&"object"==typeof e[i]||(e[i]={}),s(e[i],c))}var l;return s(e,...t)}function h(e){i=e}function a(e,t){o.from=e,o.to=t}function r(e,t=null){t=p(t)?"":t;let n=c("style");n.id=i+t,n.textContent="",document.head.append(n);let l=n.sheet;for(let n in e)e.hasOwnProperty(n)&&u(l,n,d(e[n]),t)}function d(e){let t="";for(let[n,l]of Object.entries(e))n=n.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t+=`${n}:${l};`;return t}function u(e,t,n,l=null){l=p(l)?"":l;let c=t.replace(o.from,o.to+l);e.insertRule(c+"{"+n+"}",0)}function k(e=null){const t=p(e)?"":e;let n=l("#"+i+t);n&&n.parentNode&&n.parentNode.removeChild(n)}function p(e){return"number"!=typeof e&&(!e||"string"==typeof e&&0===e.length)}function g(e=8){return Math.random().toString(36).substring(2,2+e)}function f(e,t,n){return new CustomEvent(e,{detail:t,...n})}var m=Object.freeze({__proto__:null,addEventListener:function(e,t,n,l){e.addEventListener(t,n,l)},createEvent:f,dispatchEvent:function(n,l=document,c,i){try{if("string"==typeof n){let e=f(n,c,i);return l.dispatchEvent(e)}if(n instanceof Event)return l.dispatchEvent(n);t("Invalid event type")}catch(t){return e("Dispatch Event Error:",t),!1}},removeEventListener:function(e,t,n,l){e.removeEventListener(t,n,l)}});class C{static throwError=n.throwError;static getElem=l;static deepMerge=s;static generateRandom=g;static injectStylesheet=r;static removeStylesheet=k;static setStylesheetId=h;static setReplaceRule=a;static isEmpty=p;static createEvent=m.createEvent;static dispatchEvent=m.dispatchEvent;static getTemplate(e){return`\n        <div class="checkbox check-box-${e=e.toString()}">\n            <span class="checkmark"></span>\n            <label class="checkbox-label"></label>\n        </div>\n        `}static getCheckAllElements(e){if(!e)return[];let t=[];return Array.isArray(e)?e.forEach((e=>{"string"==typeof e?t.push(...C.getElem(e,"all")):e instanceof HTMLInputElement&&t.push(e)})):"string"==typeof e?t.push(...C.getElem(e,"all")):e instanceof HTMLInputElement&&t.push(e),t.filter((e=>null!==e))}static handleCheckboxTitle(e,t){let n,l=e.title||e.dataset.checkboxTitle||null,c=!1,i=null,o=!1;if(t instanceof HTMLLabelElement){const s=t.htmlFor,h=t.dataset.checkboxFor,a=e.dataset.checkboxId;c=!C.isEmpty(e.id)&&s===e.id,o=!C.isEmpty(e.id)&&h===e.id,C.isEmpty(a)||h!==a||(i=C.isEmpty(e.id)&&C.isEmpty(s)?"check-"+C.generateRandom(6):null,o=!0),(o||c)&&(n=t.cloneNode(!0),l=l||t.textContent,t.parentNode.removeChild(t))}return{title:l,remainLabel:c,randomID:i,labelToRestore:n}}static insertCheckbox(e,t,n,i){let o=C.getTemplate(e),s=c("div");s.innerHTML=o.trim();let h=l(".checkmark",s),a=l("label",s),r=t.cloneNode(!0);return r.withID=!0,n&&(r.id=n,r.withID=!1),!0===i&&(a.htmlFor=r.id),h.addEventListener("click",(e=>{if(e.preventDefault(),r.click(),e.shiftKey){let e=C.createEvent("shift-click",{detail:{checkedElement:r}});C.dispatchEvent(e,r)}})),h.parentNode&&h.parentNode.insertBefore(r,h),t.parentNode.replaceChild(s.firstElementChild||s,t),{cloneEle:r,templateNode:s,labelNode:a}}static insertCheckboxTitle(e,t,n,l){e?(n.textContent=e,!0===t&&(n.classList.add("checkbox-labeled"),n.addEventListener("click",(e=>{if(e.preventDefault(),l.click(),e.shiftKey){let e=C.createEvent("shift-click",{detail:{checkedElement:l}});C.dispatchEvent(e,l)}})))):n.parentNode.removeChild(n)}static toggleCheckStatus(e,t){t?(e.checked=!0,e.setAttribute("checked","checked")):(e.checked=!1,e.removeAttribute("checked"))}static toggleCheckAll(e,t){0!==e.length&&e.forEach((e=>{if(!t||!t.checked||!t.input)return void C.toggleCheckStatus(e,!1);const n=t.checked.length===t.input.length&&0!==t.checked.length;C.toggleCheckStatus(e,n)}))}static restoreElement(e){if("function"==typeof e.checkBoxChange&&e.removeEventListener("change",e.checkBoxChange),"function"==typeof e.checkAllChange&&e.removeEventListener("change",e.checkAllChange),!1===e.withID&&e.removeAttribute("id"),e.checkBoxChange=void 0,e.removeAttribute("data-checkbox"),e.parentNode){e.parentNode.replaceWith(e)}let t=e.labelToRestore;t&&t.nodeType===Node.ELEMENT_NODE&&e.parentNode?.insertBefore(t,e.nextSibling)}}C.setStylesheetId("checkbox-style"),C.setReplaceRule(".check-box",".check-box-");const b={checked:null,checkMark:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4=",checkAll:null,bindLabel:!0,styles:{},onChange:()=>{},onCheckAll:()=>{}};class E{static instances=[];static version="2.0.7";static firstLoad=!0;element=null;options=b;id=0;allElement=[];total={input:[],checked:[],list:[]};checkAllElement=[];lastChecked=null;onChangeCallback;onCheckAllCallback;constructor(e,t){this.init(e,t,E.instances.length),E.instances.push(this),1===E.instances.length&&!0===E.firstLoad&&((e,t=!1)=>{!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)})(`CheckBox is loaded, version: ${E.version}`),E.firstLoad=!1}init(e,t,n){let l=C.getElem(e,"all");return(!l||l.length<1)&&C.throwError("Cannot find elements : "+e),this.id=n,this.element=e,this.options=C.deepMerge({},this.options,t),this.injectStyles(),this.setupCallbacks(),l.forEach(((e,t)=>this.processCheckbox(e,t))),this.options.checkAll&&this.processCheckAll(),this}injectStyles(){let e={};this.options?.checkMark&&(e={".check-box input[type=checkbox] + .checkmark:after":{"background-image":"url("+this.options.checkMark+")"}}),this.options?.styles&&Object.keys(this.options.styles).length>0&&(e=C.deepMerge({},this.options.styles,e)),e&&C.injectStylesheet(e,this.id.toString())}setupCallbacks(){this.onChange=(e,t)=>{this.options?.onChange&&this.options.onChange(e,t)},this.onCheckAll=e=>{this.options?.onCheckAll&&this.options.onCheckAll(e)}}processCheckbox(e,t){if("checkbox"!==e.type)return;if(e.hasAttribute("data-checkbox"))return;e.setAttribute("data-checkbox","true");let n=e.nextElementSibling,l=this.options.bindLabel??!1,{title:c,remainLabel:i,randomID:o,labelToRestore:s}=C.handleCheckboxTitle(e,n);l=!!i||l,e.checked?C.toggleCheckStatus(e,!0):this.options.checked&&this.updateCheckboxStatus(e,t);let{cloneEle:h,labelNode:a}=C.insertCheckbox(this.id.toString(),e,o,i);C.insertCheckboxTitle(c,l,a,h);let r=this.checkBoxChange.bind(this,!0,h,void 0);h.addEventListener("change",r),h.checkBoxChange=r,this.allElement.push(h),h.labelToRestore=s}updateCheckboxStatus(e,t){const n=this.options.checked;"boolean"==typeof n?C.toggleCheckStatus(e,n):"string"==typeof n||"number"==typeof n?e.value!==n.toString()&&t!==Number(n)||C.toggleCheckStatus(e,!0):Array.isArray(n)&&n.includes(e.value)&&C.toggleCheckStatus(e,!0)}processCheckAll(){const e=C.getCheckAllElements(this.options.checkAll);0!==e.length&&e.forEach((e=>{if(!e||"checkbox"!==e.type)return;if(e.hasAttribute("data-checkbox"))return;e.setAttribute("data-checkbox","true");const t=e.nextElementSibling;let{title:n,remainLabel:l,randomID:c,labelToRestore:i}=C.handleCheckboxTitle(e,t);n&&t&&"LABEL"===t.tagName&&(n=t.textContent||n,t.parentNode?.removeChild(t));const{cloneEle:o,templateNode:s,labelNode:h}=C.insertCheckbox(this.id.toString(),e,c,l);e.parentNode?.replaceChild(s.firstElementChild||s,e),C.insertCheckboxTitle(n,this.options.bindLabel??!1,h,o),o.addEventListener("change",this.checkAllChange),o.checkAllChange=this.checkAllChange,o.labelToRestore=i,this.checkAllElement.push(o),(!0===this.options.checked||e.checked)&&(C.toggleCheckStatus(o,!0),o.dispatchEvent(new Event("change")))}))}checkBoxChange(e,t,n){this.updateTotal(),e&&this.updateCheckAllStatus(),this.onChangeCallback?.(this.total,t),t&&C.toggleCheckStatus(t,n??t.checked),this.dispatchCheckboxChangeEvent()}checkAllChange=e=>{if(!(e.target instanceof HTMLInputElement))return;const t=e.target.checked;this.allElement.forEach((e=>{C.toggleCheckStatus(e,t)})),this.updateTotal(),this.updateCheckAllStatus(),this.checkBoxChange(!1),this.onCheckAllCallback&&this.onCheckAllCallback(t)};updateTotal(){const e=this.total;e.list=[],e.input=[],e.checked=[],this.allElement.forEach((t=>{e.input.push(t),t.checked&&(e.list.push(t.value),e.checked.push(t))}))}updateCheckAllStatus(){if(this.checkAllElement.length>0){const e=this.total.checked.length===this.total.input.length;this.checkAllElement.forEach((t=>{C.toggleCheckStatus(t,e)}))}}dispatchCheckboxChangeEvent(){const e=C.createEvent("checkbox-change",{detail:this.total});C.dispatchEvent(e)}handleShiftClick(e){if(!this.lastChecked)return void this.checkBoxChange(!1,e);let t=this.allElement.indexOf(this.lastChecked),n=this.allElement.indexOf(e),l=Math.min(t,n),c=Math.max(t,n);for(let e=l;e<=c;e++)this.checkBoxChange(!0,this.allElement[e],this.lastChecked.checked);this.lastChecked=e}destroy(){E.firstLoad=!1,this.allElement.forEach((e=>{C.restoreElement(e)})),this.checkAllElement.length>0&&this.checkAllElement.forEach((e=>{e.checkAllChange&&(C.toggleCheckAll(this.checkAllElement),C.restoreElement(e))})),this.element=null,this.options=b,this.allElement=[],this.total={input:[],checked:[],list:[]},this.checkAllElement=[],C.removeStylesheet(this.id.toString());const e=E.instances.indexOf(this);-1!==e&&E.instances.splice(e,1)}set onChange(e){this.onChangeCallback=e}set onCheckAll(e){this.onCheckAllCallback=e}get elements(){return this.allElement}getCheckBox(){return this.total}refresh(){this.element&&this.init(this.element,this.options,this.id)}static destroyAll(){for(;E.instances.length;){E.instances[0].destroy()}}}return E}));

package.json

 {
   "name": "@carry0987/check-box",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A library for create and manage checkbox elements",
@@ -5,0 +5,0 @@ "type": "module",

No alert changes

Improved metrics

Total package byte prevSize

43279

increased by10.87%

Lines of code

779

increased by10.97%

No dependency changes